Skalbar vektorgrafik -
Scalable Vector Graphics

Från Wikipedia, den fria encyklopedin

SVG Logo.svg
Internetmedietyp image/svg+xml
Uniform Type Identifier (UTI) public.svg-image
Utvecklad av W3C
Initial release 4 september 2001
(för 20 år sedan)
 (
2001-09-04
)
Senaste släppningen
Typ av format Vektorgrafik
Förlängd från XML
Standard
Ja
Hemsida

Scalable Vector Graphics ( SVG ) är ett ( XML ) -baserat vektorbildformat för tvådimensionell grafik med stöd för interaktivitet och animering. SVG -specifikationen är en öppen standard som utvecklats av World Wide Web Consortium (W3C) sedan 1999.

SVG -bilder och deras beteenden definieras i XML -textfiler. Detta innebär att de kan sökas , indexeras , skriptas och komprimeras och kan skalas i storlek utan att kvaliteten försämras. Som XML -filer kan SVG -bilder skapas och redigeras med valfri textredigerare , samt med ritprogramvara . De mest använda webbläsarna återger SVG-filer .

Översikt

Denna bild illustrerar skillnaden mellan bitmapps- och vektorbilder. Bitmappsbilden består av en fast uppsättning pixlar, medan vektorbilden består av en fast uppsättning former. På bilden visar skalning av bitmappen pixlarna medan skalning av vektorbilden bevarar formerna.

SVG har utvecklats inom World Wide Web Consortium (W3C) sedan 1999 efter att sex konkurrerande förslag för vektorgrafikspråk hade lämnats in till konsortiet under 1998. Den tidiga SVG -arbetsgruppen beslutade att inte utveckla några kommersiella bidrag, utan att skapa ett nytt markeringsspråk som informerades av men inte egentligen baserades på något av dem.

SVG tillåter tre typer av grafiska objekt: vektorgrafikformer som banor och konturer som består av raka linjer och kurvor, bitmappsbilder och text. Grafiska objekt kan grupperas, formas, transformeras och komponeras till tidigare renderade objekt. Funktionsuppsättningen innehåller kapslade transformationer , urklippsvägar , alfamasker , filtereffekter och mallobjekt. SVG -ritningar kan vara interaktiva och kan innehålla animeringar , definierade i SVG XML -element eller via skript som har åtkomst till SVG Document Object Model (DOM). SVG använder CSS för styling och JavaScript för skript. Text, inklusive internationalisering och lokalisering , som visas i vanlig text inom SVG DOM, förbättrar tillgängligheten för SVG -grafik.

SVG -specifikationen uppdaterades till version 1.1 2011. Det finns två "Mobile SVG -profiler", SVG Tiny och SVG Basic, avsedda för mobila enheter med reducerade beräknings- och displayfunktioner. Skalbar vektorgrafik 2 blev en W3C -kandidatrekommendation den 15 september 2016. SVG 2 innehåller flera nya funktioner utöver dem i SVG 1.1 och SVG Tiny 1.2.

Utskrift

Även om SVG -specifikationen främst fokuserar på vektorgrafikmarkeringsspråk , innehåller dess design de grundläggande funktionerna för ett sidbeskrivningsspråk som Adobes PDF . Den innehåller bestämmelser för rik grafik och är kompatibel med CSS för stylingändamål. SVG har den information som behövs för att placera varje teckning och bild på en vald plats på en utskriven sida.

Manus och animering

SVG -ritningar kan vara dynamiska och interaktiva. Tidsbaserade ändringar av elementen kan beskrivas i SMIL , eller kan programmeras på ett skriptspråk (t.ex. JavaScript ). W3C rekommenderar uttryckligen SMIL som standarden för animering i SVG.

En rik uppsättning händelsehanterare som " onmouseover" och " onclick" kan tilldelas alla SVG -grafiska objekt för att tillämpa åtgärder och händelser.

Kompression

SVG -bilder, som XML, innehåller många upprepade textfragment, så de är väl lämpade för förlustfria datakomprimeringsalgoritmer . När en SVG -bild har komprimerats med gzip -algoritmen kallas den en "SVGZ" -bild och använder motsvarande .svgzfilnamnstillägg. Konforma SVG 1.1 -tittare visar komprimerade bilder. En SVGZ -fil är vanligtvis 20 till 50 procent av originalstorleken. W3C tillhandahåller SVGZ -filer för att testa för överensstämmelse.

Utvecklingshistoria

SVG utvecklades av W3C SVG Working Group från 1998, efter att sex konkurrerande vektorgrafikinsändningar mottogs det året:

Arbetsgruppen leddes då av Chris Lilley från W3C.

Version 1.x

  • SVG 1.0 blev en W3C -rekommendation den 4 september 2001.
  • SVG 1.1 blev en W3C -rekommendation den 14 januari 2003. SVG 1.1 -specifikationen är modulär för att undergrupper ska kunna definieras som profiler. Bortsett från detta är det väldigt liten skillnad mellan SVG 1.1 och SVG 1.0.
    • SVG Tiny och SVG Basic (Mobile SVG Profiles) blev W3C -rekommendationer den 14 januari 2003. Dessa beskrivs som profiler för SVG 1.1.
  • SVG Tiny 1.2 blev en W3C -rekommendation den 22 december 2008. Den utarbetades ursprungligen som en profil för den planerade SVG Full 1.2 (som sedan har tappats till förmån för SVG 2), men har senare ombyggts som en fristående specifikation. Det stöds i allmänhet dåligt.
  • SVG 1.1 andra upplagan, som innehåller alla fel och förtydliganden, men inga nya funktioner för den ursprungliga SVG 1.1 släpptes den 16 augusti 2011.
  • SVG Tiny 1.2 Portable/Secure, En säkrare delmängd av SVG Tiny 1.2 -profilen introducerad som en IETF -utkaststandard den 29 juli 2020. Kallas även SVG Tiny P/S. SVG Tiny 1.2 Portable/Secure är ett krav i BIMI -utkaststandarden .

Version 2

SVG 2 tar bort eller tar bort vissa funktioner i SVG 1.1 och innehåller nya funktioner från HTML5 och Web Open Font Format :

  • Till exempel tar SVG 2 bort flera teckensnittselement, t.ex. glyphoch altGlyph(ersatt av WOFF -teckensnittsformat).
  • Den xml:spaceattributet är ersatt med CSS.
  • HTML5 -funktioner som translateoch data-*attribut har lagts till.
  • Texthanteringsfunktioner från SVG Tiny 1.2 kommenteras som inkluderade, men ännu inte formaliserade i text. Några andra 1,2-funktioner körs in i körsbär, men SVG 2 är inte en superset av SVG liten 1.2 i allmänhet.

SVG 2 nådde kandidatrekommendationsstadiet den 15 september 2016 och reviderade versioner publicerades den 7 augusti 2018 och 4 oktober 2018. Det senaste utkastet släpptes den 8 juni 2021.

Mobila profiler

På grund av industrins efterfrågan introducerades två mobila profiler med SVG 1.1: SVG Tiny (SVGT) och SVG Basic (SVGB).

Dessa är delmängder av hela SVG -standarden, främst avsedda för användaragenter med begränsade möjligheter. I synnerhet definierades SVG Tiny för mycket begränsade mobila enheter som mobiltelefoner ; den stöder inte styling eller skript. SVG Basic definierades för mobila enheter på högre nivå, till exempel smartphones .

2003 antog 3GPP , en internationell grupp för telekommunikationsstandarder, SVG Tiny som det obligatoriska formatet för vektorgrafikmedia för nästa generations telefoner. SVGT är det nödvändiga vektorgrafikformatet och stöd för SVGB är valfritt för Multimedia Messaging Service (MMS) och paketomkopplad streamingtjänst. Det lades senare till som önskat format för vektorgrafik i 3GPP IP Multimedia Subsystem (IMS).

Skillnader från icke-mobil SVG

Ingen mobilprofil innehåller stöd för hela Document Object Model (DOM), medan endast SVG Basic har valfritt stöd för skript, men eftersom de är helt kompatibla delmängder av hela standarden kan de flesta SVG -grafik fortfarande återges av enheter som endast stöder mobilprofiler.

SVGT 1.2 lägger till en microDOM (μDOM), styling och scripting.

Den MPEG-4 Part 20 standard - lätt program Scene Representation (laser) och Simple Aggregation Format (SAF) är baserad på SVG Tiny. Det utvecklades av MPEG ( ISO/IEC JTC1 /SC29/WG11) och publicerades som ISO/IEC 14496-20: 2006. SVG-funktioner förbättras i MPEG-4 del 20 med viktiga funktioner för mobila tjänster, till exempel dynamiska uppdateringar, binär kodning, toppmodern typsnittrepresentation. SVG rymdes också i MPEG-4 del 11 , i formatet Extensible MPEG-4 Textual (XMT)-en textrepresentation av MPEG-4-multimediainnehållet med XML .

Funktionalitet

SVG 1.1 -specifikationen definierar 14 funktionsområden eller funktionsuppsättningar:

Banor
Enkla eller sammansatta formkonturer ritas med böjda eller raka linjer som kan fyllas i, skisseras eller användas som en urklippsbana . Banor har en kompakt kodning.
Till exempel, M(för "flytta till") föregår initiala numeriska x- och y -koordinater , och L(för "linje till") föregår en punkt som en linje ska dras till. Ytterligare kommando bokstäver ( C, S, Q, T, och A) föregå data som används för att rita olika Bézier och elliptiska kurvor. Zanvänds för att stänga en väg.
I alla fall följer absoluta koordinater kommandon med versaler och relativa koordinater används efter motsvarande små bokstäver.
Grundläggande former
Raka linjer och banor som består av en serie anslutna raka linjesegment (polylinjer), liksom slutna polygoner, cirklar och ellipser kan ritas. Rektanglar och rundhörniga rektanglar är också standardelement.
Text
Unicode -teckentext som ingår i en SVG -fil uttrycks som XML -teckendata. Många visuella effekter är möjliga, och SVG -specifikationen hanterar automatiskt dubbelriktad text (för att komponera en kombination av engelsk och arabisk text, till exempel), vertikal text (som kinesiskt var historiskt skrivet) och tecken längs en krökt väg (som texten runt kanten av USA: s stora sigill ).
Målning
SVG -former kan fyllas och skisseras (målade med en färg, en lutning eller ett mönster). Fyllningar kan vara ogenomskinliga eller ha någon grad av transparens.
"Markörer" är linjeändfunktioner, till exempel pilspetsar eller symboler som kan visas vid hörnen av en polygon.
Färg
Färger kan appliceras på alla synliga SVG element, antingen direkt eller via fill, strokeoch andra egenskaper. Färger specificeras på samma sätt som i CSS2 , dvs med hjälp av namn som blackeller blue, i hexadecimal som #2f0eller #22ff00, i decimalliknande rgb(255,255,127), eller som procentsatser av formuläret rgb(100%,100%,50%).
Gradienter och mönster
SVG -former kan fyllas eller skisseras med fasta färger enligt ovan, eller med färggradienter eller med upprepade mönster. Färggradienter kan vara linjära eller radiella (cirkulära) och kan omfatta valfritt antal färger samt upprepningar. Opacitetsgradienter kan också anges. Mönster är baserade på fördefinierade raster- eller vektorgrafikobjekt, som kan upprepas i xoch yriktningar. Övergångar och mönster kan animeras och skriptas.
Sedan 2008 har det funnits diskussioner bland professionella användare av SVG att antingen lutning maskor eller helst diffusion kurvor med fördel kan läggas till SVG-specifikationen. Det sägs att en "enkel representation [med diffusionskurvor] kan representera även mycket subtila skuggningseffekter" och att "Diffusionskurvbilder är jämförbara både i kvalitet och kodningseffektivitet med gradientmaskar, men är enklare att skapa (enligt flera artister som har använt båda verktygen) och kan fångas från bitmappar helt automatiskt. " Det nuvarande utkastet till SVG 2 inkluderar gradientmaskor.
Klippning, maskering och sammansättning
Grafiska element, inklusive text, banor, grundläggande former och kombinationer av dessa, kan användas som konturer för att definiera både inom och utanför områden som kan målas (med färger, lutningar och mönster) oberoende av varandra. Helt ogenomskinliga klippvägar och halvtransparenta masker är sammansatta för att beräkna färgen och opaciteten för varje pixel i den slutliga bilden med hjälp av alfa- blandning.
Filtereffekter
En filtereffekt består av en serie grafikoperationer som tillämpas på en given källvektorgrafik för att producera ett modifierat bitmappat resultat.
Interaktivitet
SVG -bilder kan interagera med användare på många sätt. Förutom hyperlänkar såsom nämns nedan, kan vilken som helst del av en SVG-bild göras mottaglig för användargränssnitts händelser såsom förändringar i fokus , musklick, rullande eller zoomning av bilden och andra pekaren, tangentbords- och dokumenthändelser. Händelsehanterare kan starta, stoppa eller ändra animationer samt utlösa skript som svar på sådana händelser.
Länka
SVG -bilder kan innehålla hyperlänkar till andra dokument med XLink . Genom att använda <view>elementet eller en fragmentidentifierare kan URL: er länka till SVG -filer som ändrar det synliga området i dokumentet. Detta gör det möjligt att skapa specifika vytillstånd som används för att zooma in/ut från ett visst område eller för att begränsa vyn till ett specifikt element. Detta är användbart när du skapar sprites . XLink- stöd i kombination med <use>elementet gör det också möjligt att länka till och återanvända interna och externa element. Detta gör att kodare kan göra mer med mindre markering och ger renare kod.
Scripting
Alla aspekter av ett SVG -dokument kan nås och manipuleras med hjälp av skript på samma sätt som HTML. Standardskriptspråket är JavaScript och det finns definierade DOM -objekt ( Document Object Model ) för varje SVG -element och attribut. Skript är inneslutna i <script>element. De kan köras som svar på pekarhändelser, tangentbordshändelser och dokumenthändelser efter behov.
Animering
SVG-innehåll kan animeras med de inbyggda animeringselementen som <animate>, <animateMotion>och <animateColor>. Innehåll kan animeras genom att manipulera DOM med ECMAScript och skriptspråkets inbyggda timers. SVG -animering har utformats för att vara kompatibel med nuvarande och framtida versioner av Synchronized Multimedia Integration Language (SMIL). Animationer kan vara kontinuerliga, de kan loopa och upprepa, och de kan svara på användarhändelser, som nämnts ovan.
Teckensnitt
Som med HTML och CSS kan text i SVG referera till externa teckensnittsfiler, till exempel systemteckensnitt. Om de nödvändiga teckensnittsfilerna inte finns på maskinen där SVG -filen återges kan det hända att texten inte visas som avsett. För att övervinna denna begränsning kan text visas i ett SVG -teckensnitt , där de nödvändiga glyferna definieras i SVG som ett teckensnitt som sedan refereras från <text>elementet.
Metadata
I enlighet med W3C : s initiativ Semantic Web tillåter SVG författare att tillhandahålla metadata om SVG -innehåll. Huvudfunktionen är <metadata>elementet, där dokumentet kan beskrivas med Dublin Core -metadataegenskaper (t.ex. titel, skapare/författare, ämne, beskrivning, etc.). Andra metadatascheman kan också användas. Dessutom definierar SVG <title>och <desc>element där författare också kan tillhandahålla beskrivande material i ren text i en SVG-bild för att hjälpa till att indexera, söka och hämta på ett antal sätt.

Ett SVG -dokument kan definiera komponenter inklusive former, lutningar etc., och använda dem upprepade gånger. SVG -bilder kan också innehålla rastergrafik , till exempel PNG- och JPEG -bilder, och ytterligare SVG -bilder.

Exempel

SVG -exempel markup grid.svg

Denna kod kommer att producera de färgade formerna som visas på bilden, exklusive rutnät och etiketter:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
width=
"391"
height=
"391"
viewBox=
"-70.5 -70.5 391 391"
xmlns=
"http://www.w3.org/2000/svg"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
>
<rect
fill=
"#fff"
stroke=
"#000"
x=
"-70"
y=
"-70"
width=
"390"
height=
"390"
/>
<g
opacity=
"0.8"
>
<rect
x=
"25"
y=
"25"
width=
"200"
height=
"200"
fill=
"lime"
stroke-width=
"4"
stroke=
"pink"
/>
<circle
cx=
"125"
cy=
"125"
r=
"75"
fill=
"orange"
/>
<polyline
points=
"50,150 50,200 200,200 200,100"
stroke=
"red"
stroke-width=
"4"
fill=
"none"
/>
<line
x1=
"50"
y1=
"50"
x2=
"200"
y2=
"200"
stroke=
"blue"
stroke-width=
"4"
/>
</g>
</svg>

SVG på webben

Användningen av SVG på webben begränsades av bristen på stöd i äldre versioner av Internet Explorer (IE). Många webbplatser som serverar SVG -bilder tillhandahåller också bilderna i ett rasterformat , antingen automatiskt genom HTTP -innehållsförhandling eller genom att låta användaren direkt välja filen.

Google meddelade den 31 augusti 2010 att det hade börjat indexera SVG -innehåll på webben, oavsett om det finns i fristående filer eller inbäddade i HTML , och att användarna skulle börja se sådant innehåll listat bland deras sökresultat. Den 8 december 2010 meddelades att Google Image Search också skulle börja indexera SVG -filer. Webbplatsen meddelade ett alternativ att begränsa bildsökningar till SVG -filer den 11 februari 2011.

Integrerat webbläsarstöd

Konqueror var den första webbläsaren som stödde SVG i version 3.2 i februari 2004. Från och med 2011 har alla större skrivbordsläsare, och många mindre, viss nivå av SVG -stöd. Andra webbläsares implementeringar är ännu inte slutförda; se jämförelse av layoutmotorer för ytterligare detaljer.

Vissa tidigare versioner av Firefox (t.ex. versioner mellan 1.5 och 3.6), samt en mängd andra nu föråldrade webbläsare som kan visa SVG-grafik, behövde dem inbäddade i <object>eller <iframe> element för att visa dem integrerade som delar av en HTML-webbsida istället för med det vanliga sättet att integrera bilder med <img>. SVG -bilder kan dock inkluderas på XHTML -sidor med XML -namnutrymmen .

Tim Berners-Lee , uppfinnaren av World Wide Web , var kritisk till tidiga versioner av Internet Explorer för sitt misslyckande med att stödja SVG.

  • Opera (sedan 8.0) har stöd för SVG 1.1 Tiny -specifikationen, medan Opera 9 innehåller SVG 1.1 Basic -stöd och några av SVG 1.1 Full. Opera 9.5 har delvis SVG Tiny 1.2 -stöd. Den stöder också SVGZ (komprimerad SVG).
  • Webbläsare baserade på Gecko -layoutmotorn (t.ex. Firefox , Flock , Camino och SeaMonkey ) har alla haft ofullständigt stöd för SVG 1.1 Full specifikation sedan 2005. Mozilla -webbplatsen har en översikt över modulerna som stöds i Firefox och moduler som är under utveckling. Gecko 1.9, ingår i Firefox 3.0 , lägger till stöd för mer av SVG -specifikationen (inklusive filter).
  • Pale Moon , som använder Goannas layoutmotor (en gaffel av Gecko -motorn), stöder SVG.
  • Webbläsare baserade på WebKit (t.ex. Apple 's Safari , Google Chrome , och Omni Group ' s OmniWeb ) har haft ofullständig stöd för SVG 1.1 Full specifikation sedan 2006.
  • Amaya har delvis SVG -stöd.
  • Internet Explorer 8 och äldre versioner stöder inte SVG. IE9 (släppt 14 mars 2011) stöder den grundläggande SVG -funktionsuppsättningen. IE10 utökat SVG -stöd genom att lägga till SVG 1.1 -filter.
  • Microsoft Edge stöder SVG 1.1.
  • Den Maxthon Cloud Browser stöder också SVG.

Det finns flera fördelar med inbyggt och fullständigt stöd: plugins behövs inte, SVG kan fritt blandas med annat innehåll i ett enda dokument och rendering och skript blir betydligt mer tillförlitliga.

Mobilt stöd

SVG Tiny (SVGT) 1.1 och 1.2 är mobilprofiler för SVG. SVGT 1.2 innehåller några funktioner som inte finns i SVG 1.1, inklusive stroke som inte kan skalas och som stöds av vissa SVG 1.1-implementeringar, till exempel Opera, Firefox och WebKit. När delade kodbaser mellan stationära och mobila webbläsare ökade, ökade också användningen av SVG 1.1 över SVGT 1.2.

Stöd för SVG kan vara begränsat till SVGT på äldre eller mer begränsade smarttelefoner eller kan främst begränsas av deras respektive operativsystem. Adobe Flash Lite har valfritt stöd för SVG Tiny sedan version 1.1. Vid konferensen SVG Open 2005 demonstrerade Sun en mobil implementering av SVG Tiny 1.1 för plattformen Connected Limited Device Configuration (CLDC).

Mobiler som använder Opera Mobile , liksom iPhones inbyggda webbläsare, inkluderar också SVG -stöd. Men även om den använde WebKit- motorn, stödde den inbyggda Android -webbläsaren inte SVG före v3.0 (Honeycomb). Innan v3.0 var Firefox Mobile 4.0b2 (beta) för Android den första webbläsaren som kördes under Android för att stödja SVG som standard.

Nivån på stöd för SVG Tiny varierar från mobil till mobil, beroende på vilken SVG -motor som är installerad. Många nyare mobilprodukter stöder ytterligare funktioner utöver SVG Tiny 1.1, som gradient och opacitet; detta kallas ibland för "SVGT 1.1+", även om det inte finns någon sådan standard.

RIM : s BlackBerry har inbyggt stöd för SVG Tiny 1.1 sedan version 5.0. Support fortsätter för WebKit-baserade BlackBerry Torch-webbläsare i OS 6 och 7.

Nokia 's S60-plattformen har inbyggt stöd för SVG. Till exempel återges ikoner i allmänhet med plattformens SVG -motor. Nokia har också lett JSR 226: Scalable 2D Vector Graphics API expertgrupp som definierar Java ME API för SVG -presentation och manipulation. Detta API har implementerats i S60 Platform 3rd Edition Feature Pack 1 och senare. Vissa Series 40 -telefoner stöder också SVG (t.ex. Nokia 6280 ).

De flesta Sony Ericsson -telefoner som börjar med K700 (efter utgivningsdatum) stöder SVG Tiny 1.1. Telefoner som börjar med K750 stöder också funktioner som opacitet och lutningar. Telefoner med Sony Ericsson Java Platform-8 har stöd för JSR 226.

Windows Phone har stött SVG sedan version 7.5.

SVG stöds också på olika mobila enheter från Motorola , Samsung , LG och Siemens mobile / BenQ-Siemens . eSVG, ett SVG -renderingsbibliotek som huvudsakligen är skrivet för inbäddade enheter, är tillgängligt på vissa mobila plattformar.

Applikationssupport

SVG -bilder kan produceras med hjälp av en vektorgrafikredigerare , till exempel Inkscape , Adobe Illustrator , Adobe Flash Professional eller CorelDRAW , och återges till vanliga rasterbildformat som PNG med samma programvara. Dessutom redaktörer som Inkscape och Boxy SVG tillhandahålla verktyg för att spåra rasterbilder till Bézierkurvor normalt använder bild spåra back-ändar som potrace , autotrace och imagetracerjs .

Programvara kan programmeras för att återge SVG -bilder med hjälp av ett bibliotek som librsvg som har använts av GNOME sedan 2000, Batik eller ThorVG sedan 2020 för lätta system. SVG-bilder kan också återges till önskat populärt bildformat med ImageMagick , ett gratis kommandoradsverktyg (som också använder librsvg under huven).

Andra användningsområden för SVG inkluderar inbäddning för användning i ordbehandling (t.ex. med LibreOffice ) och stationär publicering (t.ex. Scribus ), plottning av grafer (t.ex. gnuplot ) och importvägar (t.ex. för användning i GIMP eller Blender ). Applikationstjänsterna Microsoft 365 och Microsoft Office 2019 erbjuder stöd för export, import och redigering av SVG -bilder. Den Uniform Type Identifier för SVG används av Apple är public.svg-imageoch överensstämmer med public.imageoch public.xml.

Se även

Skalbar vektorgrafik

Referenser