Wéi maacht d'SVG Grafiken op Är Websäit

SVG oder Scalable Vector Graphics léiss de vill méi komplexe Biller ze maachen an hunn se op Websäiten verginn. Mee Dir kënnt net einfach d'SVG-Tags markéieren an se an d'HTML halen. Si ginn net opginn an Är Säit gëtt ongülteg. Stellt Iech eng vun dräi Methoden.

Benotzt den Objet Tag fir SVG z'ënnerstetzen

De HTML-Code bezeechent een SVG-Grafik op Är Websäit. Dir schreift den Objet Tag mat engem Datenattribut fir d'SVG-Datei ze definéieren déi Dir opmaache wëllt. Dir sollt och Breiten- an Héichtattribute fir d'Breet an d'Héicht vun Ärem SVG-Biller (an Pixelen) festleet.

Fir Cross-Browser Kompatibilitéit, sollt Dir d'Typ Attribut umellen, dat sollt liesen:

Typ = "image / svg + xml"

an e Kodebasis fir Browsers déi et net ënnerstëtzen (Internet Explorer 8 a manner). Är Codebasis weist op eng SVG-Plugin fir Browsers déi net SVG ënnerstëtzen. Déi am allgemengen benotzt Plugin ass vum Adobe at http://www.adobe.com/svg/viewer/install/. Allerdéngs gëtt dëse Plugin net méi vun Adobe ënnerstëtzt. Eng aner Optioun ass de Ssrc SVG-Plugin vun der Savarese Software Research op http://www.savarese.com/software/svgplugin/.

Äre Objet wär aus deem folgend:

Tipps fir den Objet fir SVG ze benotzen

  • Vergewëssert Iech datt d'Breet an d'Héicht am mannst sou grouss sinn wéi de Image deen Dir embeddingt. Soss kënnt Äert Bild ka gekuckt ginn.
  • Äre SVG kann net korrekt gezeechent ginn, wann Dir de richtege Contenuart hutt (type = "image / svg + xml") notzen, well ech recommandéiere net drop ze maachen.
  • Dir kënnt Faktbackinformatioun am Objektbuedem fir Browser benotzen déi net SVG-Dateien weisen.
  • Dir kënnt och d'Quell vun Ärem SVG an den Inhalttyp Parameter setzen. Dëst kann besser an IE 6 a 7 schaffen:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Bedenkt datt dat erfuerdert eng Klassifikatioun fir et ze maachen.

Sicht e SVG an engem Objekt Etikett.

Huelt SVG mat der Embed Tag

Eng aner Optioun, déi Dir hutt fir SVG ze integréieren, ass den Androck. Dir benotzt bal déiselwecht Attribute wéi d'Objektthema, wéi d'Breet <, Héicht, Typ an Codebase>. Een eenzegen Ënnerscheed ass dat anstelle vun Donnéeë benotzt Dir Är SVG-Dokument URL an der src Attribut.

Är Embed géif aussoen:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / liesen / installéieren "/>

Tipps fir de Benotzungsinformatioun fir SVG ze benotzen

  • Den Embed-Tag ass net gülteg HTML4, awer e gëltege HTML5, also wann Dir se op HTML4-Säit benotzt, sollt Dir drun erënneren datt Är Säit net validéiert.
  • Benotzt e komplett quoalifizéierte DomainName am src Attribut fir déi beste Kompatibilitéit.
  • Et ginn och verschidde Reportagen datt d'Benotzung vum Embed-Tag mat der Adobe-Plugin Mozilla Versiounen 1,0 bis 1,4 ass.

Sicht e SVG an engem Embed-Tagbeispiel.

Benotzt e Kontroll op SVG

Iframes sinn e weidere Wee fir en SVG-Biller op Äre Websäiten opzemaachen. Et erfëllt nëmmen dräi Attributer: Breet a Héicht wéi gewéinlech, a src Wendung op de Standort vun Ärem SVG Datei.

Är Iframe géif ausgesinn esou wéi: