Dit is een uitstekend artikel dat het lezen waard is.

Schaalbare vectorafbeeldingen

Van Wikipedia, de gratis encyclopedie
Spring naar navigatie Spring naar zoeken
Schaalbare vectorafbeeldingen
SVG-logo.svg
Bestandsextensie : .svg, .svgz
MIME-type : afbeelding / svg + xml [1]
Ontwikkeld door: Wereldwijde web consortium
Type: vector afbeelding formaat
Verlengd met: XML
Website : SVG 1.1
SVG 1.2 Tiny (mobiel)
SVG 2


Scalable Vector Graphics (SVG kort, Engels voor schaalbare vectorafbeeldingen) is die van de door het World Wide Web Consortium aanbevolen (W3C) specificatie die tweedimensionaal is om vectorafbeeldingen te beschrijven. SVG, dat is gebaseerd op XML , werd voor het eerst uitgebracht in september 2001. Vrijwel alle relevante webbrowsers kunnen een groot deel van het taalaanbod weergeven. [2]

Een groot voordeel van het SVG-formaat ten opzichte van andere grafische formaten zoals JPG , PNG of TIFF is - zeker bij responsive webdesign - de schaalbaarheid zonder kwaliteitsverlies. [3]

Animaties worden ondersteund door SVG met SMIL . De SVG- DOM kan worden gemanipuleerd met behulp van embedded functies via scripttalen .

Aangezien SVG een op XML gebaseerde bestandsindeling is, is de inhoud van SVG-bestanden gemakkelijk toegankelijk voor computerondersteunde vertaling en andere verwerking. Ze kunnen rechtstreeks met een teksteditor worden gemaakt of zijn de uitvoer van programma's met een andere invoer, zie bijvoorbeeld Gnuplot . Met SVG-editors kunt u gemakkelijk bewerken in de grafische weergave.

De aanbevolen bestandsextensie is .svg of, als het bestand is gecomprimeerd met gzip , .svgz . Het MIME-type is image/svg+xml . [4]

verhaal

In 1998 werden twee talen ter standaardisatie voorgelegd aan het World Wide Web Consortium (W3C):

Het W3C nam geen van beide talen als aanbeveling, maar combineerde ze en ontwikkelde ze onder eigen regie verder. Gedetailleerde redenen voor het ontwikkelen van een nieuwe taal zijn te vinden in een gedetailleerde lijst met vereisten in de eerste werkversie. [5]

Op 4 september 2001 publiceerde het W3C de eerste aanbeveling onder de naam Scalable Vector Graphics (SVG) 1.0-specificatie (Engelse aanbeveling). [6] Deze aanbeveling is door delen van de IT- industrie als standaard geaccepteerd. Microsoft volgde dit lange tijd niet en ondersteunde alleen de vectortaal VML in haar applicaties. De eerste versie van Internet Explorer die SVG native ondersteunt, is versie 9. [7] Vanaf Internet Explorer 10 ondersteunt Microsoft geen VML meer.

Al op 3 augustus 2001 werd een eerste werkconcept voor een modularisatie van SVG gepubliceerd om geschikte delen van SVG beschikbaar te stellen als aanbeveling voor mobiele apparaten met een lager prestatiebereik. [8e]

Dit leidde uiteindelijk tot versie 1.1 met drie profielen, 'Tiny' voor apparaten met lage prestaties, 'Basic' voor apparaten met een iets hoger prestatiebereik en 'Full', dat de volledige functionaliteit van SVG 1.0 bevat. Afgezien van de correcties van bekende fouten, is SVG Full 1.1 qua functies en kenmerken identiek aan SVG 1.0.

Op 14 januari 2003 werden de aanbevelingen voor SVG 1.1 en SVG Mobile gepubliceerd. [9] [10]

Deze aanbevelingen zijn vervolgens herzien. De laatste wijziging van de mobiele variant is van 2009. Voor SVG 1.1 is er een tweede wijziging van 16 augustus 2011. [11]

Aanvankelijk was het de bedoeling om SVG 1.1 uit te breiden met versie 1.2. Dit werd echter vooral met belangstelling ontvangen door aanbieders van mobiele devices, terwijl aanbieders van displayprogramma's voor computers zich aanvankelijk concentreerden op de implementatie van SVG 1.1. Daardoor kwam het profiel voor SVG Full 1.2 niet verder dan een werkend concept. [12]

Er werd echter verder gewerkt aan de mobiele versie van SVG 1.2. Inmiddels is er ook een forse uitbreiding van het dienstenaanbod voor mobiele toestellen en heeft het bedrijf zich daarom beperkt tot een profiel voor de mobiele markt. Op 22 december 2008 werd voor deze versie een aanbeveling voor een klein profiel gepubliceerd. [13] In vergelijking met 1.1 introduceert dit enkele nieuwe eigenschappen en functies, zoals elementen voor audio, video en het insluiten van andere SVG-documenten die zijn overgenomen van SMIL , het declaratief verwijderen van elementen uit het document-objectmodel en nieuwe uitbreidingen voor toegang tot scripts op het document-objectmodel, beperkte transformaties, verfservices voor kleur, de mogelijkheid om een ​​achtergrondkleur voor het schildergebied te specificeren, automatische tekstterugloop, mogelijkheid tot interactieve tekstinvoer en wijziging van tekst. Bovendien was het mogelijk om enkele onduidelijkheden en inconsistenties op te lossen met betrekking tot de declaratieve animatie in deze versie, die vervolgens grotendeels werd overgenomen als een bugcorrectie in de tweede editie van SVG 1.1.

De huidige specificaties zijn dan ook de SVG Tiny 1.2 versie en de tweede versie van SVG 1.1. Er wordt sinds 2011 gewerkt aan SVG 2 en deze zou tal van wijzigingen en verbeteringen moeten bevatten. [14] [15] Sinds 15 september 2016 bestaat er een kandidaatsadvies . Verdere kandidaat-aanbevelingen werden gepubliceerd op 7 augustus en 4 oktober 2018. [16] Inmiddels zijn tal van geplande innovaties en eisen voor versie 2 geschrapt.

document

Als XML-document wordt een SVG in een boomstructuur opgebouwd uit verschillende elementen en de aan deze elementen toegekende attributen. Zoals gebruikelijk bij op XML gebaseerde talen, kan een SVG-bestand beginnen met de XML-declaratie . Dit kan worden gevolgd door verwerkingsinstructies, zoals die voor het verwijzen naar externe stijlsjablonen.

Het specificeren van de documentsoortaangifte wordt enerzijds afgeraden, [17] anderzijds noodzakelijk geacht voor een correct document. [18]

Het is sinds het begin mogelijk en gebruikelijk bij SVG om afkortingen in de vorm van entiteiten op te nemen in de interne documenttypedeclaratie om de bestandsgrootte te kunnen verkleinen. Vanaf versie 1.0 bevatten de aanbevelingen bijbehorende voorbeelden. [19]

Zoals bij alle XML-documenten wordt deze header gevolgd door het root-element; voor SVG-documenten wordt dit svg genoemd . Om het element en de inhoud ervan duidelijk toe te wijzen aan de SVG-naamruimte en het dus een gedefinieerde betekenis te geven die te maken heeft met de SVG-aanbevelingen, wordt de naamruimte voor het root-element genoteerd met de XML-attribuutconstructie xmlns .

 <? xml-versie = "1.0"-codering = "UTF-8"?>
<svg xmlns = "http://www.w3.org/2000/svg"
    xmlns: xlink = "http://www.w3.org/1999/xlink"
    versie = "1.1" baseProfile = "vol"
    breedte = "800 mm" hoogte = "600 mm"
    viewBox = "-400 -300 800 600" >
    <title> Titel van het bestand </title>
    <desc> Beschrijving / tekst alternatief voor de inhoud. </desc>

<! - inhoud van het bestand ->

</svg>

De grootte van de afbeelding wordt gedefinieerd met de attributen width ( Engels : width ) en height (Engels: height ) van het SVG-element svg . Als deze kenmerken niet zijn ingesteld, wordt de grootte geïmpliceerd, wat overeenkomt met een kenmerkwaarde van 100% voor width en height , wat overeenkomt met 100% van de hoogte en breedte van het beschikbare weergavegebied. Met het attribuut viewBox kan worden aangegeven welk gebied van het tekenvlak in het weergavegebied moet worden weergegeven. Indien nodig wordt dit gebied omgevormd tot het weergavegebied. Als het attribuut niet is opgegeven, valt het gebied samen met het weergavegebied, zodat er geen transformatie plaatsvindt. Omdat de auteur de grootte van het weergavegebied niet kent, wordt het gebruik van viewBox over het algemeen aanbevolen, vooral als er geen informatie wordt gegeven over width en height of die in procenten worden vermeld.

Coördinatensysteem en specificatie

Vergelijking van de coördinatensystemen van een rasterafbeelding en een SVG. De rasterafbeeldingen staan ​​alleen integere coördinaten toe, SVG als vectorafbeelding staat ook getallen met drijvende komma toe als coördinaten.

Het oorspronkelijke coördinatensysteem heeft zijn oorsprong in de linkerbovenhoek van het tekengebied. Het is een intern, dimensieloos coördinatensysteem waarbij de X-as naar rechts wijst en de Y-as naar beneden wijst. Dit coördinatensysteem wordt voor de uitvoer gedimensioneerd met de attributen width (breedte) en height (hoogte). Door het attribuut viewBox en, voor de meeste afstammelingen van het viewBox , ook door het kenmerk transform , is het resultaat een huidig ​​coördinatensysteem dat verschilt van het initiële coördinatensysteem. Alle relatieve en absolute lengtespecificaties in de afbeelding zijn gerelateerd aan dit huidige coördinatensysteem. [20] In de volledige versie van SVG kunnen zowel relatieve (zoals em of procent) als absolute waarden (zoals meters of inches ) als eenheden worden geselecteerd. Hiervoor zijn de eenheden [21] die bekend zijn uit de stylesheettaal Cascading Style Sheets beschikbaar in SVG. In de kleine versies worden echter alleen dimensieloze lengtes gebruikt in de inhoud. Eenheden zijn alleen toegestaan ​​voor de width en height het wortelelement, zoals in de volledige versie. Deze procedure is over het algemeen ook nuttig voor SVG-documenten in de volledige versie, omdat het foutgevoelige conversies van eenheden vermijdt.

In tegenstelling tot de integer- pixelcoördinaten in rasterafbeeldingen (bijv. JPEG , PNG , BMP ), zijn SVG- coördinaten drijvende-kommagetallen . Pixelspecificaties in rasterafbeeldingen hebben daarentegen een beperkte resolutie, omdat hun waardebereik beperkt is tot gehele getallen en de afmetingen van de afbeelding - afhankelijk van de aard van de pixels, die klein, even groot en eenkleurig zijn rechthoeken. In het geval van op rasters gebaseerde uitvoermedia - bijvoorbeeld een monitor - geeft een SVG-specificatie zoals (x = '100' y = '200') niet de volledige schermpixel aan , maar de linkerbovenhoek (of een van de andere hoeken van de corresponderende aangrenzende pixels). Een voorwaarde voor dit voorbeeld is dat de schaal van het SVG-document op de juiste manier is geselecteerd.

elementen

SVG heeft verschillende soorten elementen:

  • Elementen met grafische presentatie bestaande uit grafische primitieven
  • Tekst in een specifiek lettertype dat beschikbaar moet zijn voor het weergaveprogramma .
  • Elementen groeperen enerzijds om weer te geven elementen, maar ook als reserve voor verwijzing door andere elementen
  • Elementen voor het verstrekken van tekstalternatieven en meta-informatie
  • Elementen voor het leveren van schilderservices zoals kleuren, kleurovergangen en patronen, inclusief markeringen, maskers of filters
  • Elementen voor animatie
  • Elementen voor het opnemen van andere taalstructuren (stijlsjablonen, scripts, representeerbare fragmenten uit andere naamruimten)
  • Elementen voor het insluiten van externe documenten ( vectorafbeeldingen of rasterafbeeldingen ), interne en externe documentfragmenten
  • Elementen voor het definiëren van lettertypen en alternatieve weergaven van glyphs

Grafische elementen

Rechthoek, cirkel, ellips, pad en veelhoek als voorbeelden van grafische primitieven. Het pad en de veelhoek zijn gevuld.

Alle grafische elementen in SVG zijn gebaseerd op eenvoudige basiselementen, zogenaamde grafische primitieven . Complexe objecten kunnen worden gemaakt door verschillende grafische primitieven te combineren. Voor alle grafische elementen kunnen de vulling, het type omtrek en de transparantie worden gedefinieerd met behulp van attributen. De grafische elementen die beschikbaar zijn in SVG zijn het pad en verschillende elementen ter vereenvoudiging

pad

Het pad is het basiselement voor representatie. Het is het krachtigste grafische element in SVG. Vrijwel alles dat door andere grafische elementen kan worden getekend, kan op equivalente wijze worden weergegeven door een padelement, omdat u hier kunt specificeren wat moet worden weergegeven met een reeks opdrachten. Hiervoor d attribuut d . Elk commando begint op de eindpositie van het vorige commando. Het wordt ingeleid door een letter gevolgd door een of meer cijfers (parameters, meestal coördinaten). Een hoofdletter betekent dat coördinaatwaarden absoluut worden geïnterpreteerd, een kleine letter betekent dat ze worden geïnterpreteerd ten opzichte van de huidige tekenpositie. De volgende commando's zijn beschikbaar:

opdracht aanwijzing parameter effect
M "Verplaatsen naar" een paar coördinaten Verplaatst de virtuele pen naar de opgegeven positie zonder iets te tekenen. [Notitie 1]
L "Lijn naar" een of meer coördinatenparen Tekent een rechte lijn naar de opgegeven locatie. Verschillende coördinaten creëren een veelhoek.
H "horizontale lijn" Een Y-coördinaat Tekent een rechte lijn evenwijdig aan de x-as op de opgegeven positie.
V "verticale lijn" Een X-coördinaat Tekent een rechte lijn evenwijdig aan de y-as op de opgegeven positie.
Z pad sluiten Nee trekt een rechte lijn naar het startpunt (laatste verplaatsingscommando) van het pad en sluit het.
A "(elliptische) boog" rx, ry, phi, lf, sf, x, y
TekeningVoorbeeld.svg Vier manieren om een ​​boog van het gele naar het andere punt te tekenen:
  • rood: lf = 0, sf = 0
  • groen: lf = 0, sf = 1
  • blauw: lf = 1, sf = 0
  • zwart: lf = 1, sf = 1

Tekent een elliptische boog met de stralen rx en ry , evenals de asuitlijning phi naar positie x ; y . Hier is lf de "vlag met lange boog" die bepaalt of de korte of lange boog moet worden getrokken, en sf is de "sweepvlag" die bepaalt of de boog een bocht naar rechts of naar links heeft. bij rx=ry een boog gemaakt en is phi zinloos. [Opmerking 2]

Q Kwadratische Bézier twee of meer paar coördinaten Tekent een kwadratische Bézier-curve , d.w.z. met een paar coördinaten als controlepunt.
t Gladde kwadratische bezier twee of meer paar coördinaten Tekent een kwadratische Bézier-curve met punten uit een eerder getekende Bézier-curve.
C. Kubieke Bézier twee of meer paar coördinaten Tekent een kubieke Bézier-curve.
S. Gladde kubieke Bézier twee of meer paar coördinaten Tekent een kubieke Bézier-curve met punten uit een eerder getekende Bézier-curve.
R. Catmull Rome twee of meer paar coördinaten Tekent een Catmull-Rom-spline vanaf het huidige punt. De opgegeven punten worden automatisch verbonden met een vloeiende curve, waarvoor in tegenstelling tot C en S geen controlepunten worden gebruikt. [Notitie 3]
B. handelswijze een of meer hoeken De oriëntatie van de volgende padgegevens wordt geroteerd met de opgegeven hoek. Specificeert een hoekmaat in graden. Als er meerdere hoeken zijn opgegeven, wordt de oriëntatie bepaald uit de som van alle hoeken. [Opmerking 4]
  1. ↑ Het specificeren van meerdere paren coördinaten resulteert in een polygoon, maar dit wordt beschouwd als een onreine programmeerstijl omdat niet alle renderers het pad correct sluiten wanneer een volgend Z-commando wordt gegeven.
  2. Let op: Als een doelpunt is opgegeven dat niet kan worden bereikt vanaf het huidige punt met de beschreven boog, bijvoorbeeld omdat het verder weg is dan de diameter van de boog, moet de parser automatische aanpassingen maken, maar dit is niet altijd het geval gebeurt volgens de regels.
  3. Voorstel voor SVG 2.0, zie werkconcept van 2015-04-09 , maar werd in het volgende werkconcept weer verwijderd.
  4. Voorstel voor SVG 2.0, zie aanbeveling kandidaten van 2016-09-015 , maar werd weer verwijderd vanwege slechte implementaties.

De andere grafische elementen zijn er om enerzijds een betere bruikbaarheid te garanderen, maar ook om de betekenis van de inhoud duidelijker te benadrukken, omdat de notatie van een corresponderend pad in de brontekst vaak niet op het eerste gezicht te zien is of het een eenvoudig cirkel, een ellips, een rechthoek met afgeronde hoeken. Het maakt animatie van deze speciale vormen ook gemakkelijker. Net als het path-element kunnen ze worden getekend als een omtrek, gevuld en gebruikt voor clipping (met uitzondering van het <image /> element). Een andere uitzondering komt voort uit het feit dat de Tiny-profielen geen elliptische bogen toestaan, dus cirkels, ellipsen en ook rechthoeken met elliptisch afgeronde hoeken kunnen niet exact worden geconstrueerd met het element <path /> in dit profiel, maar met de speciale elementen die daarvoor zijn voorzien .

 <pad d = "M 174.5,126,0 L 175,0,127,5 173,5,128.0 174,5,126,0 ZM 100,100 C 100,200 200,100 200,200 Q 50,150,100,100 L 200,100 z" />
cirkel

Het element <circle /> definieert een cirkel , die wordt beschreven door de positie van het middelpunt (cx; cy) en zijn straal "r":

 <cirkel cx = "125" cy = "125" r = "75" />
Ovaal

Het element <ellipse /> definieert een ellips , die wordt beschreven door de positie van het middelpunt (cx; cy) en de twee halve assen (rx; ry).

 <ellips cx = "125" cy = "125" rx = "75" ry = "150" />

Om de uitlijning van de assen te veranderen, moet men ofwel met het pad-element ofwel met transformaties werken.

rechthoek

Het element <rect /> definieert een rechthoek door de positie van de linkerbovenhoek (x, y), de breedte (breedte) en de hoogte (hoogte). Optioneel kunnen de hoeken van de rechthoek worden afgerond door radii (rx, ry) op te geven.

 <rect x = "25" y = "25" breedte = "400" hoogte = "200" rx = "10" ry = "10" />
lijn

Het element <line /> definieert een eenvoudige rechte lijn (segment), die wordt beschreven door de coördinaten van de twee eindpunten (x1, y1 en x2, y2).

 <regel x1 = "50" y1 = "50" x2 = "200" y2 = "200" />
Traverse

Het element <polyline /> definieert een willekeurig aantal punten die door lijnen als een polygoon zijn verbonden. De punten worden beschreven met behulp van coördinatenparen met behulp van de parameter punten.

 <polylijn punten = "50.150 50.200 200.200 200.100" />
Veelhoek

Het element <polygon /> definieert een polygoon . Het wordt op precies dezelfde manier gedefinieerd als de polygoon, waarbij het laatste punt ook verbonden is met het eerste, zodat er een gesloten polygoon ontstaat.

tekst

Met het element <text /> wordt de tekst ingebed in de afbeelding. Het tekstelement kan worden opgemaakt met attributen zoals lettergrootte en lettertype, rijrichting en woordspatiëring. Tekst kan ook worden gestructureerd met behulp van <tspan /> zoals <tspan /> .

afbeelding

Het element ( <image /> ) integreert een rasterafbeelding die wordt beschreven door een pad, breedte en hoogte op te geven, evenals de positie.

groepering

Al deze elementen kunnen worden gecombineerd met het groepselement ( <g /> ). Transformaties en opmaak toegepast op het groepsitem zijn van toepassing op alle onderliggende items die ermee zijn gegroepeerd.

Het element <a /> is ook geschikt om de weer te geven content te groeperen, maar kan ook een referentiefunctionaliteit hebben.

Het <defs /> element wordt ook op een bepaalde manier gebruikt om te groeperen, maar de inhoud ervan wordt niet direct weergegeven, maar is bedoeld als een repository van waaruit andere elementen kunnen verwijzen.

Tekstalternatieven, barrièrevrijheid en toegankelijkheid

Zoals bij de meeste formaten die door het W3C worden aanbevolen, wordt ook speciale nadruk gelegd op SVG om auteurs gemakkelijke opties te geven om inhoud toegankelijk te maken. De basis is vooral de mogelijkheid om een ​​tekstalternatief aan te bieden. Andersom zou de grafische weergave van het document ook als alternatief voor deze tekstuele inhoud kunnen worden omschreven. Als een voldoende tekstalternatief ontbreekt, kan formeel worden geconcludeerd dat het document geen relevante informatie bevat.

Elk SVG-document dat inhoudelijk relevant is, moet daarom minimaal een <title /> element hebben als het eerste onderliggende element van het root-element. Zoals de naam al doet vermoeden, wordt de titel van het werk als tekst genoemd, bijvoorbeeld in de zin van een korte samenvatting. Titels kunnen ook alleen dienen ter identificatie van een werk in een externe discussie (hoe benoem je werken van kunstenaars als je over deze werken wilt discussiëren).

<title /> kan gevolgd worden door een <desc /> element. De inhoud van <desc /> is een meer gedetailleerde beschrijving van het werk, meer in termen van betekenis en functie dan de grafische uitvoering ervan. De inhoud van <desc /> kan eenvoudige tekst zijn, maar kan ook worden gestructureerd met een ander XML-formaat zoals XHTML. <title /> en <desc /> vertegenwoordigen samen het tekstalternatief voor de grafische inhoud van het document. Dit is de kerninhoud van het document met betrekking tot de functie van barrièrevrij en toegankelijkheid en geeft zo ook mensen toegang tot de informatie van het document, die de grafische weergave niet kan of wil zien. Aangezien de betekenis van de inhoud van grafische voorstellingen niet per se gemakkelijk te begrijpen is, kan deze alternatieve inhoud natuurlijk ook zeer nuttig zijn voor andere mensen. Als alternatief wordt dit tekstalternatief alleen getoond als de grafische weergave niet getoond wordt. Bovendien kan het tekstalternatief worden weergegeven als de gebruiker daarom vraagt.

<desc /> kan ook worden gevolgd door een element <metadata /> , dat primair bedoeld is om meta-informatie over het document te bevatten. Deze meta-informatie wordt meestal gestructureerd genoteerd, zodat deze automatisch door programma's kan worden geëvalueerd. Zo zijn bijvoorbeeld het XML-formaat RDF of elementen en termen volgens Dublin Core geschikt om te structureren.

Bijna alle andere elementen van SVG kunnen ook <title /> , <desc /> en <metadata /> met een beschreven functie bevatten, ze vormen dan het tekstalternatief en meta-informatie voor het element waarin ze staan, inclusief de afstammelingen van dit onderdeel.

Het concept heeft zwakke punten in termen van meertaligheid, vooral met betrekking tot het <title /> element van het root-element, dat slechts met één taal kan worden opgemerkt. In het geval van meertalige werken kan het zinvol zijn om de inhoud van dit element alleen te beschouwen als een taalinvariante identificatie van het werk en om het eigenlijke meertalige tekstalternatief op te nemen in de andere twee elementen, die meer structuur kunnen hebben.

Presentatie- en stijlsjablonen

De weergave van elementen kan worden beïnvloed met presentatieattributen. Zo kunnen bijvoorbeeld de vulling, contourlijn en transparantie van de elementen worden gespecificeerd, evenals de eigenschappen van het lettertype voor tekst. Naast de presentatieattributen zijn er ook gelijknamige eigenschappen volgens Cascading Style Sheets (CSS), die geschikt zijn om een ​​alternatieve presentatie aan te bieden met een stijlsjabloon. De eigenschappen en dus stijlsjablonen zijn niet voorzien voor de profielen van het kleine type. De presentatie-attributen en de bijbehorende eigenschappen zijn grotendeels gebaseerd op de stijlsjabloontalen XSL en CSS, die veel worden gebruikt in de XML-omgeving. [22] Met extra elementen kunnen niet alleen kleuren, maar ook kleurovergangen en patronen worden gebruikt.

Door de beschikbaarheid van presentatie-attributen en eigenschappen kan een scheiding worden gemaakt tussen inhoud en decoratie, vergelijkbaar met de combinatie van (X) HTML en CSS. Wat bij elementen en attributen wordt genoteerd, wordt inhoudelijk relevant of belangrijk geacht voor het begrijpen van het document, en wat wordt aangeboden als alternatieve presentatie met stijlsjablonen in een andere taal zoals CSS als decoratie.

Zoals bij alle XML- indelingen, kan naar externe stylesheets worden verwezen met de juiste verwerkingsinstructies. Bovendien, SVG heeft ook een speciale style element in welke stijl templates kunnen worden opgemerkt. Met een style kan ook voor elk element een stijlsjabloon worden genoteerd. Echter, aangezien de attribuutwaarde van style een zeer hoge prioriteit heeft en de stijlsjabloon ook slecht gescheiden is van de eigenlijke inhoud als attribuutwaarde, wordt het gebruik van het attribuut beschouwd als gemakkelijk te vermijden en slecht met betrekking tot het principe van scheiden inhoud en decoratie.

transformatie

Elk element en elke groep elementen kan in positie, oriëntatie en vorm worden veranderd door een reeks affiene transformaties . De transformatie is als attribuut aan elk element gekoppeld. Translatie (parallelle verplaatsing ) , rotatie , schaling , afschuiving en de combinatie van verschillende transformaties in de vorm van een 3 × 3 matrix zijn beschikbaar . De matrix wordt toegepast op punten in een projectieve weergave en vertegenwoordigt dus de combinatie van een lineaire afbeelding in de vorm van een 2 × 2 matrix met een vertaling, maar zonder onderscheid te hoeven maken tussen de laatste twee soorten afbeeldingen. [23] De transformaties kunnen naar wens worden gecombineerd, waarbij het uitvoeren van transformaties na elkaar overeenkomt met de vermenigvuldiging van de transformatiematrices.

Een transformatie met directe matrixspecificatie vindt plaats met

transform="matrix(abcdef)"

Dit is een korte vorm voor de niet-constante elementen van de mappingmatrix

Hier komt overeen:

Vertaling rond t x en t y
transform="translate(t x ,t y )" transform="matrix(1 0 0 1 t x t y )"
Rotatie met hoek α rond punt (0,0)
transform="rotate(α)" transform="matrix(cos(α) sin(α) -sin(α) cos(α) 0 0)"
Rotatie met hoek α rond punt (c x c y ) (zie hieronder)
transform="rotate(α,c x ,c y )" transform="matrix(cos(α), sin(α), -sin(α), cos(α), c x , c y ) matrix(1,0,0,1,-c x ,-c y )"
= transform="matrix(cos(α), sin(α), -sin(α), +cos(α),
(1-cos(α))c x + sin(α)c y , (1-cos(α))c y - sin(α)c x )"
Schalen met de factoren s x en s y
transform="scale(s x ,s y )" transform="matrix(s x 0 0 s y 0 0)"
Afschuiving onder hoek α in de X-richting
transform="skewX(α)" transform="matrix(1,0,tan(α),1,0,0)"
Afschuiving onder hoek α in de Y-richting
transform="skewY(α)" transform="matrix(1,tan(α),0,1,0,0)"

Matrixberekening:

Een afbeelding werkt op een punt P - dwz op zijn projectieve weergave in homogene coördinaten - door het van links te vermenigvuldigen met de overeenkomstige afbeeldingsmatrix. Als P wordt verschoven met T , zijn de nieuwe coördinaten

analoog voor schalen met S :

Für die Hintereinanderausführungen von T und S gilt in diesem Falle

sowie

die letzte Darstellung kann in SVG z. B. codiert werden als

 „scale(s x s y ) translate(t x t y )“

oder als

 „matrix(s x 0 0 s y s x ·t x s y ·t y )“

Die Verkettung von zweimal "matrix" in SVG bedeutet also

transform="matrix(a 1 b 1 c 1 d 1 e 1 f 1 ) matrix(a 2 b 2 c 2 d 2 e 2 f 2 )"
= transform="a 1 *a 2 +c 1 *b 2 , b 1 *a 2 +d 1 *b 2 , a 1 *c 2 +c 1 *d 2 , b 1 *c 2 +d 1 *d 2 , a 1 *e 2 +c 1 *f 2 +e 1 , b 1 *e 2 +d 1 *f 2 +f 1 "

Animation

Illustration einer Animation in SVG: Gleichzeitige Animation der Füllfarbe und der Transformationen eines Rechtecks über 5 Sekunden.

SVG hat Elemente, mit denen Animation interaktiv und deklarativ bewerkstelligt werden kann, das heißt ohne Skripte rein durch Angaben in der XML-Auszeichnungsprache. SVG übernimmt dabei von SMIL Elemente und die Interpretation derselben in den eigenen Namensraum.

Beispiel eines animierten SVG-Dokumentes ( Hier klicken, um die Animation zu starten ; funktioniert nicht in allen Browsern)

Durch die von SMIL übernommenen Elemente können deklarative Animationen realisiert werden. In den Empfehlungen ist im Detail beschrieben, welche Merkmale animierbar sind und in welcher Weise. Animierbar sind die meisten Attribute und Eigenschaften, zusätzlich gibt es die Möglichkeit, die Position von Gruppierungselementen oder darstellbaren Elementen zu animieren.

Zeitangaben können von Millisekunden bis Stunden angegeben und verschieden ausgezeichnet werden. Für die meisten Animationselemente wird ein Pflichtattribut benötigt, das die Art der Animation festlegt. Weitere grundlegende Komponenten sind Zeitangaben, Zustände während der Animation (optional), der Zustand nach der Animation, und ob die Animation nach Beendigung wiederholt werden soll, ob der Animationseffekt dann kumulativ ist und ob er additiv hinsichtlich anderer Animationen mit niedrigerer Priorität und der notierten Attributwerte sein soll. Für die Zeitangabe werden logische Begriffe wie begin ( englisch : Start, Beginn ) end (englisch: Ende ) und dur (englisch „duration“: Dauer ) verwendet. Start, Wiederholungen etc. können auch von Ereignissen wie Mausberührung oder -klick abhängig gemacht werden.

Die Auswahl des animierten Attributes oder der animierten Eigenschaft wird in SVG durch zwei Attribute festgelegt: attributeName gibt den Namen des zu animierenden Attributes oder der zu animierenden Eigenschaft an, attributeType gibt an, ob ein Attribut animiert wird oder eine (CSS-)Eigenschaft. Im illustrierten Beispiel wird angedeutet, dass die Füllung ( fill -Attribut) eines Rechtecks sowie dessen Transformation ( transform -Attribut) über die Dauer von fünf Sekunden animiert wird. Die Illustration selbst enthält keine Animation. Zu Beginn ist das Rechteck blau gefüllt und nicht verdreht, nach fünf Sekunden ist es grün gefüllt, etwas versetzt und um 150° verdreht. Die Zwischenzustände können je nach den angegebenen Attributen diskret geändert werden, sich gleichmäßig, aber auch ungleichmäßig ändern, im Beispiel schematisch durch vier Zwischenschritte dargestellt.

Grafische Effekte und Filter

Unschärfe-Filter in SVG. Links ohne, rechts mit Filter, angewandt auf eine Gruppe von Elementen.

Bekannte Grafikfilter sind aus Desktop-Publishing -Programmen übernommen worden und arbeiten nach dem Matrizen-Prinzip , bei dem Operatoren und Funktionen die Form der Matrix ausdrücken. Es wird jede einzelne Bildposition mit dem definierten Filtereffekt berechnet und auf die nächste übertragen. Auf diese Weise lassen sich Bilder und Grafiken auf verschiedenste Art und Weise bearbeiten.

Programmierung

SVG stellt mit Ausnahme des Profils Tiny 1.1 einen Zugriff auf das XML-Dokument-Objekt-Modell (DOM) bereit und zusätzlich eine eigene Erweiterung dieses DOMs. Damit wird es möglich, die Präsentation eines SVG-Dokumentes zu manipulieren. Dies wird meistens mit Skriptsprachen wie ECMAScript/JavaScript genutzt, um während der Präsentation diese dynamisch zu ändern, um Betrachtern einen interaktiven alternativen Zugang zum Inhalt zu ermöglichen. Die DOM-Repräsentation kann allerdings auch vor der Betrachtung manipuliert werden, wonach ein inhaltlich geändertes Dokument abgespeichert werden kann.

SVG selbst fordert allerdings nicht, dass eine bestimmte Skriptsprache interpretiert wird. Auch daher haben solche Skripte formal nicht die Möglichkeit, den Inhalt oder die Bedeutung eines Dokumentes während der Betrachtung zu ändern. Hinsichtlich Zugänglichkeit und Barrierefreiheit ist dies immer von Autoren zu bedenken, die Skripte in Dokumenten verwenden möchten.

Über das DOM können zum Beispiel neue Objekte erzeugt werden, die Elementen und ihren Eigenschaften entsprechen. Die DOM-Repräsentation eines Dokumentes kann so auf Benutzereingaben wie Mausklicks und Mausbewegungen reagieren oder vollständig algorithmisch generiert werden. Das lässt sich etwa in Web-Anwendungen nutzen (vergleiche den Grafikeditor SVG-edit, [24] Diagramme in Google Docs [25] oder Kartenanwendungen [26] ).

Zur Manipulation von SVG definiert der SVG-Standard das SVG-DOM. [27] Es erweitert das für alle XML-Arten gleiche Standard-DOM durch SVG-spezifische Datentypen und Funktionen, etwa für grafische Transformationen ( Affine Abbildungen ). Diese Schnittstelle ist für verschiedene Programmiersprachen standardisiert (für die standardisierte JavaScript -Teilmenge ECMAScript, Java , Perl und Python [28] ). In vielen gängigen Darstellungsprogrammen wird JavaScript zur DOM-Manipulation verwendet.

Beispiel

Variable Resistor.svg

Das folgende Beispiel illustriert die Verwendung eines SVG-Dokuments zur Anzeige einer einfachen Vektorgrafik. Es zeigt das Grundgerüst eines SVG-Dokumentes sowie die Verwendung der grafischen Primitive line , rect und polygon . Das Polygon, das zur Darstellung der Pfeilspitze verwendet wird, wird außerdem mit Hilfe einer Transformation um 135° um die Spitze gedreht.

Die rechts dargestellte Grafik Variable Resistor.svg (Schaltbild eines Potentiometers ) ist mit dem folgenden, kommentierten Quelltext erzeugt:

 <?xml version="1.0" encoding="UTF-8"?>
<svg xmlns= "http://www.w3.org/2000/svg"
 version= "1.1" baseProfile= "full"
 width= "700px" height= "400px" viewBox= "0 0 700 400" >

 <!-- Anschlüsse links und rechts -->
 <line x1= "0" y1= "200" x2= "700" y2= "200" stroke= "black" stroke-width= "20px" />
 <!-- Das Rechteck -->
 <rect x= "100" y= "100" width= "500" height= "200" fill= "white" stroke= "black" stroke-width= "20px" />
 <!-- Der Schleifer -->
 <line x1= "180" y1= "370" x2= "500" y2= "50" stroke= "black" stroke-width= "15px" />
 <!-- Die Pfeilspitze -->
 <polygon points= "585 0 525 25 585 50" transform= "rotate(135 525 25)" />
</svg>

Profile

In SVG gibt es drei Profile, die für die Darstellung auf unterschiedlichen Ausgabegeräten abgestimmt sind und jeweils unterschiedlich umfangreich den SVG-Standard definieren. Sie werden im Wurzelelement (SVG) mit dem Attribut baseProfile angegeben. [29]

SVGT
( baseProfile="tiny" ) SVG Tiny 1.1 ist für stark beschränkte Mobile internet devices (MID) und Mobiltelefone gedacht. Es definiert nur eine kleine Untermenge des SVG-Standards. SVG Tiny 1.2 ist für deutlich leistungsfähigere mobile Geräte gedacht und geht in seinen Merkmalen teils sogar über SVG Full 1.1 hinaus, klammert einige andere Teile von Version 1.1 aber auch aus.
SVGB
( baseProfile="basic" , englisch „einfach, grundlegend“) ist für etwas leistungsfähigere MIDs gedacht, definiert aber nicht den gesamten SVG-Standard.
SVGF
( baseProfile="full" , englisch „voll, vollständig“) ist für Computer als Ausgabegerät gedacht und umfasst SVG voll.

Durch die Benutzung von Profilen wird auch leistungsschwachen Geräten ermöglicht, mit standardkonformen SVG-Dateien zu arbeiten. Autoren sollten sich also bemühen, dass die zentralen Inhalte mit dem eingeschränkten Funktionsumfang sinnvoll präsentiert werden, die verwendeten zusätzlichen Möglichkeiten des vollen Profils also nicht essentiell für das Verständnis des Inhalts sind. Darstellungsprogramme können solche Angaben natürlich auch nutzen, um den Nutzer zu warnen, dass das Programm eventuell nicht alle Inhalte korrekt anzeigen kann, wenn eine Version oder ein Profil verwendet wird, das im Programm gar nicht implementiert ist.

Verbreitung

Desktop

Einige Desktop-Umgebungen benutzen SVG als Format für Programmsymbole , Hintergrundbilder oder Mauszeiger . Der zusätzliche Ressourcenverbrauch zum Rendern wird dabei durch steigende Hardwareressourcen kompensiert, so etwa von Grafikkarten direkt übernommen. Beispielhafte Projekte sind das Oxygen Project [30] für KDE und das Tango Desktop Project [31] für Gnome .

Editoren

Programme, mit denen SVG-Dateien erstellt und bearbeitet werden können

  • Adobe Illustrator ( proprietär ; Windows, Mac OS)
  • Affinity Designer (Windows, Mac OS) [32]
  • Apache OpenOffice – nativer Import und Export mit Einschränkungen ( freies Office-Paket)
  • Aphalina Designer [33] – vektorbasierte, Buch orientierte Tablet App für Windows (freie App, In-App Käufe; SVG Import und Export (Export als Kauf-Option))
  • Bildeditor [34] – ein didaktischer Quelltexteditor zum Erlernen einfacher Bildkodierungen [35] (freie Software; browserbasiert – verwendet SVG, das Browser-DOM und JavaScript zum Editieren)
  • CorelDRAW (proprietär; Windows, Mac OS)
  • Inkscape – Grafik- und Zeichenprogramm (freie Software; Linux/Unix, Windows, Mac OS X; verwendet SVG als natives Dateiformat (mit Inkscape-Erweiterungen))
  • LibreOffice – nativer Import und Export mit Einschränkungen (freies Office-Paket)
  • Microsoft Visio (proprietär; Windows)
  • PhotoLine (proprietär; Windows, Mac OS)
  • Scribus (freie Software; Unix, Linux, Mac OS X, OS/2, Windows)
  • SVG-edit [36] – Grafikeditor, online [37] und offline verwendbar (freie Software; browserbasierend – verwendet SVG, das Browser-DOM und JavaScript zum Editieren)
  • Xara Designer Pro – Grafik- und Zeichenprogramm (proprietär für Windows)

Von Editoren erzeugte SVG-Dateien enthalten oft unnötig primitive, unnötig zahlreiche Elemente mit stereotyper Wiederholung teilweise wirkungsloser Attribute und sind daher leicht um einen Faktor 2 bis 100 größer. Das Erstellen von Grundformen mit bestimmten Symmetrien, etwa ein gleichschenkliges Dreieck oder ein Büschel Pfeile mit einheitlichen Spitzen, gelingt im Quellcode schnell und präzise, mit einem grafischen Editor nur schnell oder halbwegs präzise.

Programme, mit denen SVG-Dateien geöffnet und bearbeitet, nicht jedoch im selben Format gespeichert werden können

SVG-Interpretation in Darstellungsprogrammen

SVG wurde in erster Linie für das World Wide Web entworfen. Moderne Darstellungsprogramme (unter anderem sogenannte Webbrowser ) können große Teile davon korrekt darstellen, dh, sie benötigen kein SVG-Zusatzprogramm (Browser- Plug-in ). Der tatsächlich verfügbare Funktionsumfang hängt jedoch stark vom Darstellungsprogramm ab. Beispielsweise sind für den Internet Explorer der oben erwähnte Unschärfefilter erst ab der Version 10 und Animationen überhaupt nicht verfügbar. Bei einigen Programmen werden ferner auch SVG-Schriftarten komplett ignoriert.

Anhand der offiziellen SVG-Test-Suite erreichte Anfang 2011 Opera 11.01 mit 95,44 % der möglichen Punkte unter den verbreiteten Browsern den höchsten Unterstützungsgrad für SVG 1.1, der Internet Explorer 9.0 als inkompatibelster damals aktueller Browser nur 59,64 %. [38] Zu bedenken ist dabei, dass die Test-Suite zur SVG-Empfehlung nicht dazu dient, den Funktionsumfang von Darstellungsprogrammen zu testen, sondern umgekehrt, ob Merkmale der Empfehlung implementiert wurden und implementierbar sind. Die Tests sind also nicht unabhängig von den Autoren der Empfehlung entstanden und einige der Autoren der Tests sind gleichzeitig Mitarbeiter der Unternehmen, die die Darstellungsprogramme entwickeln und anbieten. Es handelt sich also nicht um einen systematischen und unabhängigen Test der Fähigkeiten der Programme. Es ist also nicht notwendig ein guter Anhaltspunkt dafür, wie wahrscheinlich es ist, dass ein „normales“ SVG-Dokument korrekt präsentiert wird, weil „normale“ Dokumente meist viele Merkmale verwenden, Tests zu SVG-Spezifikationen aber beinahe nur die jeweils mit dem Dokument getesteten Merkmale. Die Gewichtung und Verwendung richtet sich dabei zudem eher nach der Komplexität der Merkmale und der Implementierung, nicht nach der typischen Verwendung in „normalen“ Dokumenten durch Autoren.

Bei anderen Ansätzen wird eher die Frage gestellt, ob bestimmte Merkmale für Autoren wirklich praktisch nutzbar sind. [39] Auch hier empfiehlt es sich ähnlich wie bei der offiziellen Test-Suite natürlich, die einzelnen Testbeispiele im Detail durchzugehen und zu schauen, in welcher Tiefe und in welcher Kombination mit anderen Merkmalen überhaupt getestet wurde und wie unabhängig die Autoren der Tests von denen der Empfehlung und den Anbietern der Darstellungsprogramme sind, um zu einer zuverlässigen Aussage hinsichtlich der Nutzbarkeit für Autoren und Betrachter zu kommen.

Zum Beispiel bietet die Firma Savarese Software Research eine Erweiterung für den Internet Explorer in Version 6 bis 8 an. [40] Bekannt seit den Anfängen von SVG, aber nicht mehr weiterentwickelt, ist auch eine entsprechende Erweiterung der Firma Adobe, das in den Anfangsjahren von SVG praktisch das dominierende Programm zur Präsentation von SVG war.

Einige JavaScript - Bibliotheken (z. B. dojo .gfx, Raphaël , SVG Web ) bieten die Möglichkeit, Bildelemente in JS-Syntax zu beschreiben. Falls SVG nicht interpretiert wird, kann über diesen Umweg dann automatisch ein vom Darstellungsprogramm interpretiertes Dokument-Objekt generiert werden (z. B. VML oder Flash ), ansonsten wird direkt eine SVG generiert. All das kann jedoch bedeuten, dass nicht alle von SVG gebotenen Möglichkeiten genutzt werden können. Es muss also nicht alles von einer Sprache in eine andere transformierbar sein oder von der verwendeten Bibliothek transformiert werden können, zusätzlich zu dem Problem, dass eine Interpretation der verwendeten Skriptsprache auch nicht notwendig komplett oder überhaupt verfügbar sein muss. Die Methode bietet sich also eher als vom Betrachter jeweils aktiv auswählbare Alternative an, nicht als Pauschallösung.

Mit Acid3 liegt ein Test vor, der Darstellungsprogramme in gewissem Rahmen darauf prüft, ob sie SVGs korrekt darstellen können. Safari (4.0), Opera (10.0) und Chrome (4.0) erreichen in jenem Test seit 2009 die volle Punktzahl, Mozilla Firefox (4.0) seit 2011 und der Internet Explorer (10.0) seit 2012.

Interoperabilität bei Office-Software

Der Import von SVG ist ab Microsoft Office 2016 [41] möglich und steht mittlerweile auf allen Plattformen zur Verfügung. [42] Ebenso unterstützen LibreOffice und Apache OpenOffice den Import von SVG.

Interpretation durch Suchmaschinen

Seit September 2010 berücksichtigt Google SVG bei der Bildersuche. [43] Damit ist SVG neben JPEG , GIF , PNG , Bitmap und WebP eines von sechs Grafikformaten , die Google berücksichtigt. [44] Auch Bing berücksichtigt mittlerweile SVG.

Auch für Suchmaschinen sind Textalternativen und von Programmen analysierbare strukturierte Metainformationen von besonderer Bedeutung, um Auskunft über den Inhalt einer Grafik geben zu können. Die Möglichkeiten von SVG als XML-Format sind denen der genannten Rastergrafikformate gleichwertig oder überlegen und von Autoren zudem ohne spezielle Programme einfach zu ergänzen.

The Graphical Web

Von 2002 bis 2016 fand einmal jährlich die Konferenz The Graphical Web statt, bei der in Vorträgen und Workshops aktuelle Entwicklungen im Umfeld von SVG vorgestellt wurden.

Siehe auch

Literatur

Weblinks

Wikibooks: SVG – Lern- und Lehrmaterialien
Commons : SVG-Beispiele – Album mit Bildern, Videos und Audiodateien
Commons : Hand-SVGs – Sammlung von Grafiken, die mit Text-Editoren manuell erstellt wurden
Commons : Vereinfachungen – Beispiele für manuell vereinfachte Grafiken

Einzelnachweise

  1. M Media Type registration for image/svg+xml
  2. Can I use... Support tables for HTML5, CSS3, etc. Abgerufen am 27. Februar 2021 .
  3. Daniel Geiser: Die Vor- und Nachteile des SVG-Formats im responsiven Webdesign. new time design Scherrer & Grasso, 30. September 2015, abgerufen am 12. Januar 2019 .
  4. Introduction – SVG 1.1 World Wide Web Consortium , 14. Januar 2003
  5. SVG Requirements. Abgerufen am 27. Februar 2021 .
  6. Scalable Vector Graphics (SVG) 1.0 Specification. Abgerufen am 27. Februar 2021 .
  7. Dean Hachamovitch: HTML5, Hardware Accelerated: First IE9 Platform Preview Available for Developers
  8. SVG Mobile Requirements
  9. Scalable Vector Graphics (SVG) 1.1 Specification
  10. Mobile SVG Profiles: SVG Tiny and SVG Basic
  11. Scalable Vector Graphics (SVG) 1.1 (Second Edition)
  12. Scalable Vector Graphics (SVG) Full 1.2 (Working Draft)
  13. Scalable Vector Graphics (SVG) Tiny 1.2 Specification
  14. SVG2 Planning Page. Abgerufen am 30. Januar 2015 .
  15. SVG2 Requirements Commitments. Abgerufen am 8. Juli 2015 .
  16. w3.org: Scalable Vector Graphics (SVG) 2
  17. SVG 1.1 Einleitung
  18. SVG 1.1 Anhang G2
  19. Beispiel in SVG 1.1
  20. SVG – Coordinate Systems, Transformations and Units. W3C, 14. Januar 2003, abgerufen am 10. September 2009 .
  21. SVG – Basiseinheiten. CSS4You, 20. Oktober 2006, abgerufen am 3. September 2009 .
  22. SVG – Styling. W3C, 14. Januar 2003, abgerufen am 10. September 2009 .
  23. SVG – The transform attribute. Abgerufen am 28. August 2009 .
  24. Webseite von SVG-edit
  25. Introduction to Using Chart Tools auf Google Developers
  26. Mappetizer
  27. Spezifikationen des SVG Document Object Models in Version 1.1 und des SVG Micro DOM in Version 1.2
  28. Inhaltsverzeichnis der SVG Tiny 1.2 Spezifikationen
  29. Mobile SVG Profiles: SVG Tiny and SVG Basic. W3C, abgerufen am 29. August 2009 .
  30. siehe auch: Oxygen Project in der englischsprachigen Wikipedia; Homepage der Entwickler
  31. siehe auch: Tango-Desktop-Project in der englischsprachigen Wikipedia; offizielle Homepage
  32. Affinity Designer – Professionelle Software für Grafikdesign. Abgerufen am 6. Februar 2018 (deutsch).
  33. Aphalina Designer , Aphalina Homepage
  34. Kevin Reuß: Bildeditor. In: Bildeditor - Ein didaktischer Bildeditor zum erlernen einfacher Bildkodierungen. Kevin Reuß, 1. März 2019, abgerufen am 10. Juni 2020 .
  35. informatik.schule.de - Portal fuer den Informatikunterricht. Abgerufen am 10. Juni 2020 .
  36. SVG-edit , Projekt bei GitHub
  37. Siehe regelmäßig aktualisierten Link unter “Try SVG-edit here” .
  38. SVG Test Suite results. codedread.com, 24. März 2011, abgerufen am 27. März 2011 (englisch).
  39. Compatibility table for support of SVG in desktop and mobile browsers. Abgerufen am 20. Januar 2013 .
  40. Ssrc SVG: SVG Plugin for Internet Explorer. Abgerufen am 27. Februar 2021 .
  41. Microsoft Docs: Anmerkungen zur Version für monatliche Kanal Veröffentlichungen in 2016 - Office release notes. Abgerufen am 27. Februar 2021 (deutsch).
  42. Edit SVG images in Microsoft Office 365. Abgerufen am 27. Februar 2021 .
  43. Google indexiert SVG Grafiken. In: @-web. 2. September 2010, abgerufen am 27. Februar 2021 .
  44. Rankingkriterien für die Bildersuche. In: @-web. 14. Mai 2012, abgerufen am 27. Februar 2021 .
  45. Homepage The Graphical Web 2016
  46. Homepage The Graphical Web 2015
  47. Homepage The Graphical Web 2014
  48. Homepage The Graphical Web 2013
  49. Homepage The Graphical Web 2012
  50. Homepage SVG Open 2011
  51. Homepage SVG Open 2010
  52. Homepage SVG Open 2009
  53. Homepage SVG Open 2008