Mamy dwa podstawowe sposoby umieszczania rysunków SVG w dokumencie - możemy odwołać się kilkoma technikami do zewnętrznego pliku .svg przesłanego na serwer lub też umieścić kod rysunku bezpośrednio w kodzie strony internetowej.
Osadzanie embed - zwróć uwagę, że na stronie osadzany jest obraz znajdujący się w odrębnym pliku z rozszerzeniem .svg (w naszym przypadku niebieskie_kolo.svg), który został przesłany na serwer.
Zaletą jest obsługa kodu przez wszystkie główne przeglądarki i możliwość oskryptowania. Wprawdzie HTML 4 i XHTML uznały kod za schyłkowy, ale jest on dopuszczony w HTML 5.
<embed src="/niebieskie_kolo.svg" type="image/svg+xml" />
Osadzanie object
Zaletą jest obsługa przez główne przeglądarki i obecność w standardach, natomiast wadą brak możliwości oskryptowania.
<object data="niebieskie_kolo.svg" type="image/svg+xml"></object>
Osadzanie iframe
Zaletą jest obsługa przez przeglądarki, wadą natomiast nieładny wygląd okna i nieobecność w standardach HTML 4 strict i XHTML strict.
<iframe src="/niebieskie_kolo.svg"></iframe>
Osadzanie linku do pliku
<a href="/niebieskie_kolo.svg">Obejrzyj plik</a>Obejrzyj plik
Osadzanie bezpośrednie - kod obrazu umieszczamy bezpośrednio na stronie internetowej i nie odwołujemy się do żadnego zewnętrznego pliku SVG.
<svg width="250" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="70" stroke-width="2" stroke="black" fill="#4a90d6"/> </svg>
W przypadku osadzania bezpośredniego zalecane jest podanie rozmiarów kanwy obszaru SVG, np. svg width="500" height="250". Gdybyśmy go nie podali, przeglądarki będą wyznaczać ten obszar samodzielnie, a każda z nich "po swojemu". Internet Explorer wyświetli obszar i jego elementy poprawnie, Chrome rozszerzy obszar w dół i pozostawi puste miejsce, Firefox nie wyświetli elementów obszaru, zaś Opera przytnie obszar do wysokości 150 pikseli. Jeśli podamy jawnie wysokość i szerokość obszaru, wszystkie przeglądarki wyznaczą z góry
