Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

SVG - osadzanie rysunku

Email Drukuj PDF

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

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V