Grafika SVG lub Scalable Vector pozwala rysować dużo bardziej złożone obrazy i renderować je na stronach internetowych. Ale nie możesz po prostu wziąć tagów SVG i wrzucić je do kodu HTML. Nie pojawią się, a Twoja strona będzie nieważna. Zamiast tego musisz użyć jednej z trzech metod.
Użyj znacznika obiektu do osadzenia SVG
Tag HTML osadzi grafikę SVG na twojej stronie internetowej. Napisujesz znacznik object z atrybutem danych, aby zdefiniować plik SVG, który chcesz otworzyć. Należy również uwzględnić atrybuty szerokości i wysokości, aby zdefiniować szerokość i wysokość obrazu SVG (w pikselach).
Aby uzyskać zgodność z różnymi przeglądarkami, należy dołączyć atrybut type, który powinien brzmieć:
type = "image / svg + xml"
i kod dla przeglądarek, które go nie obsługują (Internet Explorer 8 i niższe). Twoja baza kodów wskazuje na wtyczkę SVG dla przeglądarek, które nie obsługują SVG. Najczęściej używana wtyczka pochodzi z Adobe pod adresem http://www.adobe.com/svg/viewer/install/. Jednak ta wtyczka nie jest już obsługiwana przez Adobe. Inną opcją jest wtyczka Ssrc SVG z Savarese Software Research pod adresem http://www.savarese.com/software/svgplugin/.
Twój obiekt wyglądałby tak:
Wskazówki dotyczące używania obiektu do SVG
- Upewnij się, że szerokość i wysokość są co najmniej tak duże jak obraz, który umieszczasz. W przeciwnym razie obraz może zostać obcięty.
- Twoja grafika SVG może nie wyświetlać się prawidłowo, jeśli nie podasz prawidłowego typu treści (
type = "image / svg + xml"), więc nie zalecam opuszczania go. - Możesz zawrzeć informacje zastępcze wewnątrz
obiekttag dla przeglądarek, które nie wyświetlają plików SVG. - Możesz również ustawić źródło swojego SVG i typ zawartości w parametrach. Może to działać lepiej w IE 6 i 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">
Zauważ, że wymaga to klasy, aby to działało.
Zobacz SVG w przykładzie znacznika obiektu.
Osadź SVG z tagiem osadzania
Inną dostępną opcją dotyczącą SVG jest użycie tagu. Używasz prawie takich samych atrybutów jak znacznik obiektu, w tym szerokość <, wysokość, typ i baza kodów>. Jedyna różnica polega na tym, że zamiast daneumieszczasz adres URL dokumentu SVG w atrybucie src.
Twoje osadzenie będzie wyglądać tak:
src = "http://twoja-domena.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>
Wskazówki dotyczące używania funkcji osadzania w SVG
- Tag osadzania jest nieprawidłowy HTML4, ale jest prawidłowy HTML5, więc jeśli używasz go na stronie HTML4, pamiętaj, że Twoja strona nie zostanie zweryfikowana.
- Użyj w pełni kwalifikowanej nazwy domeny w atrybucie src, aby uzyskać najlepszą kompatybilność.
- Są też pewne raporty, że użycie tagu embed z wtyczką Adobe spowoduje awarię Mozilli w wersjach od 1.0 do 1.4.
Wyświetl SVG w przykładzie tagu osadzania.
Użyj elementu iframe do włączenia SVG
Iframes to kolejny łatwy sposób na umieszczenie obrazu SVG na twoich stronach internetowych. Wymaga tylko trzech atrybutów: szerokość i wysokość jak zwykle, a src wskazuje lokalizację pliku SVG.
Twoja ramka iframe wyglądałaby tak:
Wskazówki dotyczące używania elementu iframe w SVG
Element iframe będzie wyświetlany z ramką wokół obrazu, chyba że usuniesz krawędź ze stylem, na przykład
style = "border: none;"
Element iframe nie określa położenia wtyczki, więc jeśli przeglądarka klienta nie ma wtyczki, może ona w ogóle nic nie widzieć lub może pojawić się komunikat o błędzie.
Zobacz SVG w przykładzie tagu iframe.
