Scalable Vector Graphics
SVG | |
Filändelse | .svg .svgz |
---|---|
MIME-typ | image/svg+xml |
Typ av format | Vektorgrafik |
Utökad från | XML |
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
[redigera | redigera wikitext]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
[redigera | redigera wikitext]- SVG 1.0 antogs som W3C-rekommendation 4 september 2001.
- SVG 1.1 antogs som W3C-rekommendation 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
[redigera | redigera wikitext]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
[redigera | redigera wikitext]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
ochembed
- 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
[redigera | redigera wikitext]- 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
[redigera | redigera wikitext]- Inkscape är ett vektorbaserat ritprogram som har stöd för SVG filformat.
- Adobe Illustrator kan spara i SVG.
- Arbortext Isodraw kan spara i SVG.
- Autodesk AutoCAD och Inventor Publisher kan publicera i SVG.
- Svg-edit, ett webbaserat ritprogram.
- Mathematica kan importera och exportera SVG-filer.
Exempel
[redigera | redigera wikitext]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
[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.
Noter
[redigera | redigera wikitext]- ^ Secret Origin of SVG, W3C, läst 2013-01-06
- ^ Roadmap - SVG, W3C, läst 2015-02-19
- ^ Resultatet av den officiella testsviten
- ^ SVG stöd i Presto 2,12[1] Arkiverad 5 november 2012 hämtat från the Wayback Machine.
- ^ SVG stöd i Gecko[2] Arkiverad 7 maj 2012 hämtat från the Wayback Machine.
- ^ Nuvarande implementation i Webkit [3]
- ^ [4]
- ^ ”HTML5 SVG” (på engelska). w3schools.com. w3schools. https://www.w3schools.com/html/html5_svg.asp. Läst 3 juli 2017.
Externa länkar
[redigera | redigera wikitext]- Wikimedia Commons har media som rör Scalable Vector Graphics.