Scalable Vector Graphics

SVG
Filändelse.svg .svgz
MIME-typimage/svg+xml
Typ av formatVektorgrafik
Utökad frånXML
Exempel på en SVG-bild (i png-format)

Scalable Vector Graphics, SVG, är ett XML-baserat vektorgrafik-format för tvådimensionella bilder som stöder animationer och interaktivitet. SVG-specifikationen är en öppen standard och har utvecklats av W3C-konsortiet sedan 1999.

SVG-bilder och deras egenskaper definieras i XML-textfiler. SVG-bilder kan därför skapas och redigeras med vilken textredigerare som helst, men det är ofta mer praktiskt att skapa dem med ritprogram som stödjer formatet.

Alla moderna webbläsare inklusive Mozilla Firefox, Microsoft Edge och senare, Google Chrome, Opera och Safari, stödjer SVG i åtminstone någon utsträckning och kan rendera SVG-märkspråket utan tilläggsprogram.

Flera skrivbordsmiljöer (KDE, Gnome med flera) arbetar med att försöka göra all grafik SVG-baserad. Detta gör att skrivbordets upplösning blir irrelevant då allt kan skalas till valfri storlek. Gnome har haft inbyggt stöd för SVG sedan år 2000.

Historik

W3C påbörjade 1998 arbete för att få fram ett web-anpassat alternativ till formatet PostScript, med anledning av att detta format gav mycket stora filer för att åstadkomma skalbara typsnitt och bildobjekt. Sex förslag lämnades in 1998, däribland två förslag från varsitt konsortium i form av Precision Graphics Markup Language (PGML) från Adobe Systems, IBM, Netscape och Sun Microsystems, och Vector Markup Language (VML) från Hewlett Packard, Macromedia, Microsoft och Visio.[1] W3C satte därefter upp en arbetsgrupp under namnet SVG Working Group, som tog fram SVG med PGML och VML som grund.

Versionshistorik

  • SVG 1.0 antogs som W3C-rekommendation 4 september 2001.
  • SVG 1.1 antogs som W3C-rekommendation 14 januari 2003.
    • SVG Tiny och SVG Basic, SVG-profiler för mobila applikationer baserade på SVG 1.1, antogs som W3C-rekommendationer 14 januari 2003.
  • SVG Tiny 1.2 antogs som W3C-rekommendation 22 december 2008.
  • SVG 1.1 Second Edition, som inkluderar felrättning och förklaringar, men inga nya egenskaper, släpptes 16 augusti 2011.
  • SVG 1.2 har under flera års tid funnits i arbetsversion (W3C Working Draft) men kommer inte att fullföljas till en rekommendation, utan överges till förmån för SVG 2.0.
  • SVG 2.0 befinner sig under arbete med sikte på att bli en rekommendation i december 2016.[2][Uppdatering behövs]

Översikt

SVG tillåter tre typer av grafikobjekt: vektorgrafik, rastergrafik och text. Objekt, inklusive PNG- och JPEG-rasterbilder, kan grupperas, ges olika stil, transformeras och ingå i kompositobjekt med andra objekt.

Programvaror med stöd för SVG

SVG kan användas med flera olika slags programvaror, men förekommer oftast i diskussioner runt webben. Stödet för SVG kan definieras på två sätt, dels om hur stor del av standarden som stöds, dels på vilket vis man kan inkludera SVG-bilder.

Resultatet av den officiella testsviten [3] för hur stor del av SVG-standarden en viss programvara stödjer publiceras av Jeff Schiller

Den här artikeln eller det här avsnittet innehåller inaktuella uppgifter och behöver uppdateras. (2012-10)
Motivering: Jeff Schillers test är från 2011-03-24, artikeln behöver uppdaterade uppgifter
Hjälp gärna Wikipedia att åtgärda problemet genom att redigera artikeln eller diskutera saken på diskussionssidan.

Olika sätt att inkludera SVG i en webbsida är exempelvis:

  • Genom elementen object och embed
  • I XHTML, genom att infoga koden och ange dess namnrymd
  • I HTML5 kan man infoga koden direkt, utan att ange namnrymd.
  • Genom att ange sökväg till en SVG-fil med img-elementet i HTML.
  • Genom att ange en SVG-fil som bakgrundsbild i CSS
  • Genom att applicera SVG som filter eller mask ovanpå vanligt HTML-innehåll.
  • Genom att inkludera en SVG-fil som bildelement inuti en annan SVG-fil, med SVG:s eget bildelement.

Stöd i webbläsare

  • Presto, renderingsmotorn som Opera använder har nästan full stöd för SVG 1.1 Full.[4]
  • Gecko, renderingsmotorn som Firefox använder har nästan fullt stöd för SVG 1.1 Full.[5]
  • Webkit, renderingsmotorn som Safari, Chromium och Google Chrome använder har nästan fullt stöd för SVG 1.1 Full.[6]
  • Webbläsaren i Android saknade ursprungligen stöd för SVG (på grund av att man ville spara plats i minnet.[7]), men har fr.o.m. Honeycomb stöd för SVG.
  • Webbläsaren Konqueror som baseras på KHTML och KPARTS) har delvis stöd för SVG.
  • Internet Explorer 9 och senare versioner stöder SVG.[8] Äldre versioner kan använda ett insticksprogram för att visa SVG.
  • Amaya har begränsat stöd för SVG.

Program som producerar SVG

Exempel

Om man vill rita en röd cirkel med svart kant så kan det exempelvis göras på detta vis: 

<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>

Ovanstående kodexempel börjar med några rader kod som definierar XML-skelettet och storleken på det interna koordinatsystemet. Sedan följer en rubrik (som inte behövs) och en rad kod som definierar figuren som är avbildad till höger som en .png-fil.

Se även

Referenser

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.

Noter

  1. ^ Secret Origin of SVG, W3C, läst 2013-01-06
  2. ^ Roadmap - SVG, W3C, läst 2015-02-19
  3. ^ Resultatet av den officiella testsviten
  4. ^ SVG stöd i Presto 2,12[1] Arkiverad 5 november 2012 hämtat från the Wayback Machine.
  5. ^ SVG stöd i Gecko[2] Arkiverad 7 maj 2012 hämtat från the Wayback Machine.
  6. ^ Nuvarande implementation i Webkit [3]
  7. ^ [4]
  8. ^ ”HTML5 SVG” (på engelska). w3schools.com. w3schools. https://www.w3schools.com/html/html5_svg.asp. Läst 3 juli 2017. 


Externa länkar