Hoppa till innehållet

Scalable Vector Graphics

Från Wikipedia
För det typografiska måttet ”perl”, se Typografisk punkt. För andra betydelser, se Scalable Vector Graphics (olika betydelser).
SVG
SVG logo.svg
Exempel på grafik i SVG-format.
Exempel på grafik i SVG-format.
Filändelse.svg .svgz
MIME-typimage/svg+xml[1]
Uniform typidentifierarepublic.svg-image[2]
Utvecklad avW3C
Typ av formatvektorgrafikformat
Utökad frånXML
StandardSVG 1.1 (Second Edition)
SVG 2 (kandidatrekommendation)

Scalable Vector Graphics (SVG) är ett XML-baserat språk och filformat för tvådimensionell vektorgrafik och blandad vektor- och rastergrafik. Formatet kan även innehålla text och stödjer bland annat animation och interaktivitet. SVG-specifikationen utvecklas av W3C:s SVG Working Group.[3]

SVG-dokument lagras som XML-baserade textfiler och kan därför skapas och redigeras med en vanlig textredigerare. Det är dock ofta mer praktiskt att använda ett ritprogram med stöd för formatet. Vektorelementen i en SVG-bild kan skalas utan att bli pixliga, medan eventuella inbäddade rasterbilder behåller sin ursprungliga upplösning.[4]

SVG kan visas som ett fristående dokument, infogas direkt i HTML eller bäddas in i andra XML-baserade språk. Formatet stöds inbyggt av moderna webbläsare.[3][5]

Historik

[redigera | redigera wikitext]

År 1998 lämnades sex konkurrerande förslag till W3C om språk för vektorgrafik på webben. Bland dessa fanns Precision Graphics Markup Language (PGML), framtaget av bland andra Adobe, IBM, Netscape och Sun Microsystems, samt Vector Markup Language (VML), från bland andra Autodesk, Hewlett-Packard, Macromedia och Microsoft.[6]

W3C bildade därefter SVG Working Group. Arbetsgruppen valde att utveckla ett nytt språk som tog intryck av de insända förslagen, snarare än att anta något av dem direkt. Bland annat påverkade VML formatets sökvägssyntax, medan PGML påverkade koordinatsystem, transformationer, färghantering och delar av stödet för text och typsnitt.[6]

Versionshistorik

[redigera | redigera wikitext]
  • SVG 1.0 antogs som W3C-rekommendation den 4 september 2001.[7]
  • SVG 1.1 antogs som W3C-rekommendation den 14 januari 2003.[8]
    • SVG Tiny och SVG Basic, profiler av SVG 1.1 avsedda för mobila och resurssvaga enheter, antogs samma dag.
  • SVG Tiny 1.2 antogs som W3C-rekommendation den 22 december 2008.[9]
  • SVG 1.1 Second Edition publicerades som W3C-rekommendation den 16 augusti 2011. Den innehöll rättelser och förtydliganden men inga större nya funktioner.[4]
  • SVG 2 publicerades som W3C-kandidatrekommendation den 4 oktober 2018. Kandidatrekommendationen är ett arbetsdokument och inte en slutlig W3C-rekommendation.[3] Det senaste redaktörsutkastet är daterat den 14 september 2025.[10]

Översikt

[redigera | redigera wikitext]

SVG tillåter tre huvudsakliga typer av grafikobjekt: vektorformer, rasterbilder och text. Objekten kan grupperas, ges olika stilar, transformeras och kombineras med andra objekt. Formatet stöder bland annat övertoningar, mönster, beskärningsbanor, masker och filtereffekter.[4]

SVG-filer kan även innehålla länkar, skript och animeringar. Utseendet kan styras med CSS, medan interaktivitet kan skapas med exempelvis JavaScript.[3]

En SVG-fil som komprimerats med gzip brukar ha filändelsen `.svgz`. IANA beskriver `.svgz` som en beteckning för en gzip-komprimerad SVG-fil med samma medietyp som en vanlig SVG-fil.[1]

Programvarustöd

[redigera | redigera wikitext]

SVG kan infogas direkt i ett HTML-dokument eller inkluderas som en extern bild, exempelvis genom elementen img, object eller embed. Formatet kan också användas som bildkälla i CSS och i andra SVG-dokument.[11]

Vektorbaserade ritprogram som Inkscape och Adobe Illustrator kan skapa och spara filer i SVG-format.[12][13]

Exempel

[redigera | redigera wikitext]
Resultatet av kodexemplet.

Följande SVG-kod ritar en röd cirkel med svart kant:

<svg xmlns="http://www.w3.org/2000/svg" width="226" height="226">
  <title>Circle</title>
  <circle cx="110" cy="107" r="80" stroke="black" stroke-width="5" fill="red"/>
</svg>

Det yttre svg-elementet anger XML-namnrymden samt bildytans bredd och höjd. Elementet title ger bilden en textbeskrivning, medan circle anger cirkelns mittpunkt, radie, kant och fyllningsfärg. Bilden till höger renderas direkt från en SVG-fil.

Se även

[redigera | redigera wikitext]

Referenser

[redigera | redigera wikitext]
Den här artikeln är helt eller delvis baserad på material från engelskspråkiga Wikipedia, Scalable Vector Graphics, tidigare version.
Den här artikeln är helt eller delvis baserad på material från engelskspråkiga Wikipedia, SVG Working Group, tidigare version.
  1. 1 2 ”Media Types: image/svg+xml” (på engelska). Internet Assigned Numbers Authority. https://www.iana.org/assignments/media-types/image/svg%2Bxml. Läst 17 augusti 2026.
  2. ↑ ”UTTypeSVG” (på engelska). Apple. https://developer.apple.com/documentation/uniformtypeidentifiers/uttypesvg. Läst 17 augusti 2026.
  3. 1 2 3 4 ”Scalable Vector Graphics (SVG) 2” (på engelska). W3C. 4 oktober 2018. https://www.w3.org/TR/SVG2/. Läst 17 augusti 2026.
  4. 1 2 3 ”Scalable Vector Graphics (SVG) 1.1 (Second Edition)” (på engelska). W3C. 16 augusti 2011. https://www.w3.org/TR/SVG11/. Läst 17 augusti 2026.
  5. ↑ ”Introduction” (på engelska). MDN Web Docs. Mozilla. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Introduction. Läst 17 augusti 2026.
  6. 1 2 ”Secret Origin of SVG” (på engelska). W3C SVG Working Group. https://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG. Läst 17 augusti 2026.
  7. ↑ ”Scalable Vector Graphics (SVG) 1.0 Specification” (på engelska). W3C. 4 september 2001. https://www.w3.org/TR/2001/REC-SVG-20010904/. Läst 17 augusti 2026.
  8. ↑ ”Scalable Vector Graphics (SVG) 1.1 Specification” (på engelska). W3C. 14 januari 2003. https://www.w3.org/TR/2003/REC-SVG11-20030114/. Läst 17 augusti 2026.
  9. ↑ ”Scalable Vector Graphics (SVG) Tiny 1.2 Specification” (på engelska). W3C. 22 december 2008. https://www.w3.org/TR/SVGMobile12/. Läst 17 augusti 2026.
  10. ↑ ”Scalable Vector Graphics (SVG) 2” (på engelska). W3C SVG Working Group. 14 september 2025. https://svgwg.org/svg2-draft/. Läst 17 augusti 2026.
  11. ↑ ”SVG as an image” (på engelska). MDN Web Docs. Mozilla. https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image. Läst 17 augusti 2026.
  12. ↑ ”Saving Your Work” (på engelska). Inkscape Beginners' Guide. https://inkscape-manuals.readthedocs.io/en/latest/saving.html. Läst 17 augusti 2026.
  13. ↑ ”How to save artwork in Illustrator” (på engelska). Adobe. https://helpx.adobe.com/illustrator/using/saving-artwork.html. Läst 17 augusti 2026.

Externa länkar

[redigera | redigera wikitext]
Hämtad från ”https://sv.wikipedia.org/w/index.php?title=Scalable_Vector_Graphics&oldid=59577419”