Scalable Vector Graphics

Från Wikipedia
Hoppa till: navigering, sök
SVG
Filändelse .svg, .svgz
MIME-typ image/svg+xml
Typ av format Vektorgrafik
Utökad från XML
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, Internet Explorer 9 och 10, 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 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 augusti 2014.[2]

Ö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

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[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 stödjer inte SVG på grund av att man vill spara diskutrymme[7]
  • 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. Ä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]

Exempel[redigera | redigera wikitext]

Svg example4.svg

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.

Croczilla.org har en sida med många SVG-exempel inklusive lättillgänglig källkod, från enkla upp till ett fullt spelbart Tetris gjort i SVG.

Se även[redigera | redigera wikitext]

Källor[redigera | redigera wikitext]

Den här artikeln är helt eller delvis baserad på material från engelskspråkiga Wikipedia, Scalable Vector Graphics
Den här artikeln är helt eller delvis baserad på material från engelskspråkiga Wikipedia, SVG Working Group
  1. ^ Secret Origin of SVG, W3C, läst 2013-01-06
  2. ^ Roadmap - SVG, W3C, läst 2013-01-06
  3. ^ Resultatet av den officiella testsviten
  4. ^ SVG stöd i Presto 2,12[1]
  5. ^ SVG stöd i Gecko[2]
  6. ^ Nuvarande implementation i Webkit [3]
  7. ^ [4]

Externa länkar[redigera | redigera wikitext]