Help:SVG/nl

This page is a translated version of a page Help:SVG and the translation is 100% complete. Changes to the translation template, respectively the source language can be submitted through Help:SVG and have to be approved by a translation administrator.

Shortcut: COM:SVG

SVG (scalable vector graphics) is een geaccepteerd bestandstype op Wikimedia Commons. Het is geschikt voor diagrammen, kaarten en andere niet-fotografische afbeeldingen. SVG wordt zeer gewaardeerd op Commons omdat het grafische objecten beschrijft met broncode en dus op dit moment de beste manier biedt om inhoud aan te passen en te verbeteren.

SVG-bestanden worden veel gebruikt op Wikimedia Commons. Hier zijn een paar tips om aan de slag te gaan (als u al weet welk programma u gaat gebruiken om dergelijke bestanden te genereren, overweeg dan om Help:Illustrator of Help:Inkscape/nl in aanvulling op het volgende).

Wat is SVG?

Scalable Vector Graphics (SVG) is een XML specificatie en bestandstype voor het beschrijven van tweedimensionale vector graphics (in tegenstelling tot een "bitmap" of rasterafbeelding) in zowel statische als geanimeerde vormen. Het wordt opgeslagen in platte tekst of gecomprimeerde (binaire) indeling, die veel efficiënter is dan de meeste andere afbeeldingstypen zoals JPEG's of GIF's. SVG's maken het ook mogelijk om rasterafbeeldingen en bewerkbare tekst in te sluiten.

librsvg

librsvg (ook wel "RSVG") is de rendering bibliotheek die door MediaWiki wordt gebruikt om de SVG-bestanden te rasteren in het PNG-bitmapformaat dat in Wikimedia wordt aangeboden. De weergegeven afbeelding is geen SVG en is daarom niet geanimeerd of interactief. Een reden voor deze keuze is dat het in realtime weergeven van een SVG oudere computers of besturingssystemen vertraagt. Een rasterversie die efficiënt kan worden geconverteerd vanuit de SVG-bron helpt dit technische probleem op te lossen. Een andere reden is dat sommige SVG-bestanden groot zijn (bijv. 1 MB), maar dat de afbeelding bij weergave op een monitor 160×320 pixels kan zijn, wat een ongecomprimeerde 51200 pixels zou zijn (153600 bytes voor 24-bits kleuren).

Vanaf mei 2023 draait Commons librsvg 2.44.10 (phab:T193352), al vier jaar oud op het moment dat het hier wordt toegepast. Dit is een vroege versie van de librsvg herschrijving in programmeertaal Rust en om oude problemen zoals de mask bug (phab:T55899) op te lossen en initiële ondersteuning biedt voor SVG 2.0, blijven sommige oplossingen voor de upstream niet beschikbaar voor ons vanwege onze oude Debian-release. Zie (phab:T265549) voor de laatste updates.

Verschillende ontbrekende functies en bugs van librsvg hebben invloed op SVG-afbeeldingen op Commons. Bijgevolg moeten SVG-bestanden deze problemen voorkomen of oplossen. Bijvoorbeeld, librsvg ondersteunt de tekst op een padfunctie niet, en librsvg heeft problemen met top-to-bottom-tekst. Zelfs wanneer librsvg foutloos werkt, kunnen er compatibiliteitsproblemen zijn als een SVG-bestand bijvoorbeeld een lettertype gebruikt dat Commons niet heeft.

Eigenaardigheden

Stylesheet

Tracked in Phabricator
Task T68672
RESOLVED

In de SVG specificatie, het style element moet? standaard zijn van het type attribuut van "text/css".^[1] SVG-afbeeldingen die stijlelementen gebruiken, moeten expliciet type="text/css" instellen in hun tag ‎<style>. (Met andere woorden, ‎<style type="text/css"> verdient de voorkeur boven ‎<style>.) (phab:T68672)

niet weergegeven tekst / Flow-elementen

Zie § Niet weergegeven tekst (Flowed Text bug)

`systemLanguage` verwerking

RSVG vergelijkt niet correct systemLanguage-attributen, die SVG specifiek is een kommagescheiden lijst van IETF-taaltags (langtag). RSVG past alleen de eerste subtag (de groep tekens vóór het eerste verbindingsstreepje) in de langtag, dus RSVG negeert de volgende landcode of script-subtags. RSVG maakt bijvoorbeeld geen onderscheid tussen zh-Hans (Chinees met vereenvoudigd schrift) en zh-Hant (Chinees met traditioneel schrift). Om dat probleem te omzeilen, kan een langtag voor privégebruik (één in het bereik qaa-qtz) worden gebruikt om de taal op te geven.

IETF langtag	SVG opmaak
`sr-Cyrl`	`systemLanguage="sr-Cyrl,qsc"`
`sr-Latn`	`systemLanguage="sr-Latn,qsl"`
`zh-Hans`	`systemLanguage="zh-Hans,qcs"`
`zh-Hant`	`systemLanguage="zh-Hant,qct"`

Het attribut systemLanguage moet een lijst zijn van IETF-langtags. Er is wat verwarring over de juiste taaltags. Voor het Servisch gebruikt MediaWiki sr-EC en sr-EL, maar onder BCP 47 betekenen deze tags Servisch als gesproken in de regio EG (Ecuador) en Servisch zoals gesproken in EL (niet-toegewezen regio). De juiste langtags zijn sr-Cyrl en sr-Latn. De Cyrillische langtag moet voor de Latijnse langtag staan om SVG 1.1 switch processing het Cyrillische schrift te laten kiezen als de gebruiker een taalvoorkeur heeft opgegeven die sr bevat. (MediaWiki begint de juiste langtags te gebruiken; zie Phab:T117845.)

Chinees is ingewikkelder. De zh is een macrotaalsubtag die verwijst naar alle Chinese dialecten (bijv. Mandarijn of Kantonees). Men kan Mandarijn specificeren met zh-cmn, maar het IETF-register^[2] geeft de voorkeur aan het gebruik van cmn. Evenzo geeft de IETF in plaats van zh-yue de voorkeur aan yue voor Kantonees. Het Chinese schrift kan worden gespecificeerd: Hans is het vereenvoudigde schrift en Hant is het traditionele schrift. Welke langtags u voor het Chinees moet gebruiken, is niet duidelijk. Een eenvoudige aanpak (de aanpak die door MediaWiki wordt gebruikt) gebruikt gewoon zh-Hans of zh-Hant om het script te specificeren (het IETF-register markeert beide als "overbodig" maar biedt geen voorkeursalternatief). Een alternatief specificeert het dialect en het schrift, bijvoorbeeld cmn-Hans of cmn-Hant. Er kan een regio-langtag worden toegevoegd: cmn-Hans-CN (Mandarijn met vereenvoudigd schrift zoals gebruikt in China). De macrotaal en het land worden ook gebruikt: zh-CN impliceert Chinees met behulp van het vereenvoudigde schrift, en zh-TW impliceert Chinees met behulp van het traditionele schrift.

Voor MediaWiki hebben de Servische pagina's een gemeenschappelijke bron die niet kan worden vertaald in het Cyrillisch of Latijns schrift. De Chinese pagina's hebben eveneens een gemeenschappelijke bron die in het Hans of Hant vertaald kan worden. Het beste is dat een Chinese lezer het Hans-schrift kan kiezen, en alle beelden in het artikel ook in Hans worden weergegeven. Het gewenste effect zou zo zijn:

[[File:xyz.svg|lang=zh-hant|...]] voor de zh-Hant-lezer en
[[File:xyz.svg|lang=zh-hans|...]] voor de zh-Hans-lezer.

Het is niet duidelijk of en hoe dit in MediaWiki kan worden gedaan.

Grootte attributen

De maximale grootte van een attribuut of tekst-node van een SVG in MediaWiki is 10 MB. Dit betekent dat een ingebed rasterbeeld niet groter kan zijn dan 6,9 MiB. Het gebruik van ingebedde rasterbeelden wordt ontraden.

SVG-afbeeldingen maken voor Wikimedia Commons

Programma's die u kunt gebruiken om SVG-afbeeldingen te maken, worden weergegeven in de § Editors hierna. Als alternatief kunt u de SVG-code rechtstreeks bewerken met een teksteditor of IDE.

De volgende secties verklaren specifieke kenmerken van SVG.

Voordat u uploadt: validatie en controle van het uiterlijk van de afbeelding

Validatie

Hoewel het geen vereiste is op Commons, is het een goed idee om uw bestand door de World Wide Web Consortium (W3C) XML validator (https://validator.w3.org) te halen voordat u uploadt. De validator kan problemen vinden met een SVG-bestand waardoor het bestand op verschillende platforms onjuist kan worden weergegeven. Validatie zal bijvoorbeeld klagen over het gebruik van flowText elementen, die niet-standaard zijn en slecht worden ondersteund. Het valideren van een bestand rechtvaardigt echter over het algemeen niet dat het opnieuw wordt geüpload.^[3] voor uitzonderingen zie Optimaliseren van SVG's die al zijn geüpload.

Als het SVG-bestand een DOCTYPE-declaratie, dan zal de validator die DTD gebruiken om de syntaxis te controleren. Als er geen DOCTYPE is (wat niet vereist is en ook niet wordt aanbevolen),^[4]^[5] dan kan de validator controleren of het bestand goed gevormde XML is, maar het kan zich realiseren dat het bestand SVG is en niet-DTD-validatie uitvoeren door het bestand door te geven aan zijn nu Validator. Op de W3C-validatorwebpagina kan men ervoor kiezen om het bestand te valideren als SVG 1.1. (In de komende SVG 2 Draft worden verwijzingen naar de SVG DTD verwijderd.)^[6]

Indien in het SVG-document aanvullende namespaces zijn opgenomen, klaagt de validator erover. Veel hulpmiddelen, zoals Adobe Illustrator en Inkscape, plaatsen knooppunten in aanvullende namespaces.

common prefix	namespace	doel
`cc`	`http://creativecommons.org/ns#`	Rechten en Licenties
`cdml`	`http://www.freesoftware.fsf.org/bkchem/cdml`	Chemische diagrammen
`dc`	`http://purl.org/dc/elements/1.1/`	Metadata
`i`	`http://ns.adobe.com/AdobeIllustrator/10.0/`	Adobe Illustrator
`inkscape`	`http://www.inkscape.org/namespaces/inkscape`	Inkscape
`its`	`http://www.w3.org/2005/11/its`	Internationalisatie Tag Set
`rdf`	`http://www.w3.org/1999/02/22-rdf-syntax-ns#`	Resource Beschrijvingsformaat
`serif`	`http://www.serif.com/`	Serif Affinity (wordt gebruikt voor objectnamen die niet kunnen worden opgeslagen in het standaard id-attribuut vanwege ongeschikte tekens zoals spatie)
`sodipodi`	`http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd`	Grafiek
`svg`	`http://www.w3.org/2000/svg`	SVG
`xlink`	`http://www.w3.org/1999/xlink`	XML Linking Language

Als de W3C-validator een bestand krijgt dat wordt geleverd met een geschikt Content-Type HTTP-header, dan wordt het bestand gevalideerd als SVG 1.1+XHTML+MathML 3.0 (een optie die niet beschikbaar is in de vervolgkeuzelijst van de gebruikersinterface). Die validatie wordt gedaan door een tweede, modernere, validator, de nu Validator (https://validator.w3.org/nu). Aanvullend, zal de validatie geen fouten melden voor de rdf namespace element bomen en zal schema's gebruiken om de inkscape en sodipodi namespaces te controleren. De SVG 1.1+XHTML+MathML 3.0 validatie wordt gebruikt door {{ValidSVG}}.

Andere namespaces veroorzaken nog steeds validatiefouten. De W3C nu Validator kan worden opgedragen om fouten over andere naamespaces te onderdrukken met de nsfilter-parameter.^[7]

SVG controle die cdml ns verbergt

Bovendien zullen niet-SVG 1.1-kenmerken validatiefouten veroorzaken. Het SVG 2.0-concept stelt gebruikers in staat om willekeurige data-* attributen op te nemen, net zoals HTML 5.0 dat doet, maar de W3C-validator zal erover klagen.

Zie § SVG-bestanden taggen voor het taggen van een bestand als gevalideerd.

Uiterlijk afbeelding

Verschillende softwareprogramma's en verschillende browserplatforms kunnen hetzelfde SVG-bestand op iets verschillende manieren weergeven. De manier waarop u uw uiteindelijke afbeelding in een vectorafbeeldingseditor ziet, weerspiegelt mogelijk niet hoe die afbeelding eruit zal zien zodra deze is geüpload naar Commons en door anderen wordt bekeken. Ook worden alle SVG-afbeeldingen automatisch geconverteerd naar PNG-bestanden wanneer ze in een Wikipedia-artikel worden gebruikt, en dit kan ook van invloed zijn op hoe de uiteindelijke afbeelding eruitziet. Als voorbeeld van het eerste, in een afbeelding die een reeks zeer fijne streken bevat, zullen die streken er waarschijnlijk veel vetter en dikker uitzien in de editor dan wanneer de afbeelding is geconverteerd naar SVG en in een webbrowser wordt bekeken. Wie SVG-bestanden maakt, moet overwegen om het werk in SVG-formaat te bewaren en vervolgens dezelfde afbeelding te openen met behulp van twee of drie verschillende browsers om te controleren of het wordt weergegeven zoals bedoeld. Een vergelijkbare controle kan worden gedaan door het bestand ook in andere beeldenbewerkingsprogramma's te openen.

Om een voorbeeld te bekijken van hoe een SVG wordt weergegeven als een PNG op Commons, ga naar Commons SVG Checker.

De redenen waarom hetzelfde bestand anders wordt weergegeven, afhankelijk van de context, zijn het gevolg van de manier waarop deze contexten (browsers of programma's) de SVG-code van het bestand interpreteren en die code gebruiken om de afbeelding te genereren. Streef ernaar om een SVG met de "kleinste gemene deler" te maken die correct wordt weergegeven, ongeacht welke browser wordt gebruikt om deze te openen, en ga er nooit vanuit dat uw eigen beeldbewerkingsprogramma u laat zien hoe de afbeelding er echt uit zal zien voor andere kijkers. Het bekijken van een voorbeeld van SVG's in een webbrowser (in plaats van een editor voor vectorafbeeldingen) kan enkele problemen aan het licht brengen. Het is soms handig bij het afstemmen en aanpassen van de SVG-code, vooral in combinatie met DOM Inspector-hulpmiddelen.

Ook kunnen sommige programma's u rastergebaseerde componenten in het bestand plaatsen zonder u te waarschuwen dat als het bestand wordt omgezet in SVG deze componenten niet tegelijkertijd worden omgezet naar vectoren, wat betekent dat u heel voorzichtig moet zijn met de soorten filters en effecten die u in een afbeelding opneemt en moet controleren of er ingebedde "links" zijn binnen een afbeelding voordat u de SVG oplaadt naar Commons. Hoe dit gebeurt, zal van programma tot programma verschillen.

Als u echter Adobe Illustrator gebruikt, zijn hier voorbeelden van dingen die Illustrator zullen veroorzaken om een pad om te zetten in een rastercomponent:

Alle patronen die op elke opvulling worden toegepast, inclusief patronen die automatisch in Illustrator worden opgenomen. U kunt dit soms omzeilen door alle patronen die u heeft gebruikt zelf in rasters te omzetten en vervolgens de Image→Trace-functie te gebruiken om deze terug te omzetten in vectoren.
Een pad dat meer dan één van de "Effecten" van Illustrator bevat - bijvoorbeeld een vis-oog warp en een vrijhandsvervorming. Illustrator kan er niet twee daarvan in het verschijningsmenu van een enkel pad aan.
Alle paden die zijn gewijzigd door een vervorming van de envelop. Soms kunt u deze op dezelfde manier omzeilen als het hierboven genoemde patroonprobleem, maar de resultaten zijn meestal teleurstellend.
Alle paden die het Raster-effect hebben gekregen in het menu Effecten. Om deze als vectoren te behouden, moet u dit effect alleen maar ongedaan maken.
Met Illustrator kunnen gebruikers op drie manieren verlopen toepassen op streken: verlopen binnen streken, verlopen langs streken en verlopen over streken. Echter, alleen de eerste hiervan, verlopen binnen streken, wordt ondersteund door een equivalente SVG-code; alle streken met verlopen erlangs of eroverheen worden geconverteerd naar rasters wanneer de afbeelding wordt opgeslagen in SVG-indeling.

Dit zijn slechts enkele voorbeelden van zaken die Illustrator kan veroorzaken om een raster te produceren wanneer een vector bedoeld was. Hoe eenvoudiger deze paden zijn, hoe waarschijnlijker Illustrator ze als vectoren kan bewaren.

Voor meer informatie over het controleren van SVG-bestanden voor MediaWiki, zie § Hoe SVG-bestanden werken in MediaWiki.

Document declaratie

<?xml version="1.0" encoding="UTF-8"?>
<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 version="1.1"
 viewBox="0 0 400 300"
>

De broncode van elk SVG-bestand zou moeten? beginnen met de XML-verwerkingsinstructie.^[8] De XML-verwerkingsinstructie specificeert de versie van XML en de tekenset.^[9] Het W3C dringt erop aan dat character encoding declaratie zou moeten? worden gebruikt,^[10] (de validator van W3C waarschuwt alleen voor de afwezigheid ervan). De software waarmee u het SVG-bestand maakt of bewerkt, moet de mogelijkheid bieden om tekencodering te kiezen. UTF-8 wordt aanbevolen? voor internationalisering in plaats van ANSI of Unicode coderingen voor coderingen anders dan UTF-8. Het ontbreken van de XML-declaratie zal leiden tot een lichte verwarring wanneer het SVG-bronbestand op een Wikimedia-server in een browser wordt geopend: de ruwe XML-code wordt weergegeven in plaats van in de afbeelding. Dit is geen probleem als u het SVG-bronbestand naar uw apparaat downloadt en lokaal opent.

Een DOCTYPE-declaratie met zijn DTD is niet nodig en het is officieel niet aan te raden om een DTD te gebruiken, maar het wordt ook niet aanbevolen om geen DTD te gebruiken. SVG 1.0 en SVG 1.1 hebben DTD-specificaties, maar SVG 2.0 heeft er geen. De SVG DTD valideert de SVG, maar de DTD is niet op de hoogte van extensies. Bijgevolg zal een DTD-validator ten onrechte fouten geven in de RDF metadata en de extra elementen en attributen die Inkscape bevat met zijn SVG-uitvoer. Wikimedia-servers beperken ook wat kan worden opgenomen in de interne subset van een DTD, dus het is niet langer mogelijk om de SVG DTD uit te breiden met extra elementen en attributen.

Het root element svg zou moeten volgen. Het moet? de XML-namespace specificeren voor SVG, xmlns="http://www.w3.org/2000/svg";^[11] zonder de SVG-namespace wordt een SVG-afbeelding niet weergegeven. (De standaard wordt opgegeven met xmlns.) Andere namespaces kunnen worden opgenomen in het svg element. Als het bestand bijvoorbeeld linking ^[12] gebruikt, moet de xlink-namespace xmlns:xlink="http://www.w3.org/1999/xlink" worden gedeclareerd. Het SVG-version-nummer zou moeten? worden opgenomen (meestal 1.1). Software levert normaal gesproken deze namespace declaraties en kan andere namespaces bevatten.

De standaardattribuuten width en height zijn "100%", en deze standaardattributen zullen automatische schaalverwerking mogelijk maken. Een afbeelding met een breedte van width="400px" verklaart dat het op een grootte van 400 pixels moet worden weergegeven in plaats van de container netjes te vullen. Helaas geven veel software-hulpmiddelen een vaste maat voor deze eigenschappen. Het svg element moet een viewBox attribuut specificeren^[13]. Het vak geeft het weergegeven deel van het beeld aan; het vak wordt vertaald en geschaald om in de breedte en hoogte van de container te passen.

Bitmaps

Er zijn enkele waardevolle toepassingen van bitmapafbeeldingen in SVG-bestanden, zoals het annoteren van een foto (bijvoorbeeld het labelen van de onderdelen in een anatomische foto, de labels kunnen gemakkelijk worden vertaald), wat het beste uit de twee werelden haalt: het vectoriseren van een foto of ray-traced afbeelding zou grote bestanden opleveren die onnatuurlijk en slecht schalen, terwijl het renderen van toegevoegde lettertypen en harde randen in een pure bitmap zou leiden tot een verlies van detail bij het schalen, en rinkelen langs de randen. Het meeste gebruik van bitmaps in SVG-bestanden is echter niet nodig en bitmaps kunnen vaak beter worden geconverteerd of opnieuw worden getekend als vectoren. Bitmaps moeten worden opgenomen in een SVG-bestand als dit om de een of andere reden de beste oplossing is, maar moeten opnieuw worden getekend als vectoren als dit een over het algemeen betere of meer informatieve afbeelding oplevert. Verder kunnen andere bewerkers die de afbeelding op Commons tegenkomen besluiten om de tag {{BadSVG}} bij een SVG-afbeelding te zetten als die ongewenste elementen op basis van rasters bevat.

Denk goed na over het gebruik van bitmaps in SVG-bestanden, en overweeg ze te converteren of ze opnieuw te tekenen als vectoren wanneer u ze in een afbeelding opneemt in plaats van rechtstreeks een bitmap op te nemen. Zie de overlegpagina voor verdere discussie over dit onderwerp. Als u besluit een bitmapafbeelding te gebruiken, zorg er dan voor dat u de afbeelding insluit en niet naar de afbeelding linkt; anders wordt het niet opgebouwd.

Animatie

SVG-afbeeldingen kunnen worden geanimeerd, maar omdat de SVG wordt geconverteerd naar raster PNG-formaat voor gebruik in Wikimedia-projecten, wordt de animatie alleen weergegeven wanneer het SVG-bestand in de browser is geladen. Vanaf een artikelpagina moet u op de afbeelding klikken om naar de pagina File: te gaan en vervolgens op die afbeelding klikken om de SVG te laden.

De oorspronkelijke methode om SVG te animeren gebruikt SMIL. Meer recent is CSS-animatie beschikbaar.

SMIL ziet afnemende ondersteuning in verschillende browsers. Internet Explorer ondersteunde het niet; Google heeft SMIL in 2015 afgeschaft met de mogelijkheid dat het SMIL in de toekomst volledig uit Google Chrome kan verwijderen. ^[14] Vanaf juli 2018 is SVG SMIL-animatie beschikbaar in de meeste browsers, behalve Internet Explorer, Edge en Opera.^[15]

Zie § SVG-bestanden taggen voor het taggen van een bestand als gevalideerd.

Title

Het element title direct onder het SVG-element dient als de titelnaam van de SVG-afbeelding zelf, maar kan ook verder worden toegepast in de onderliggende elementen binnen de SVG-afbeelding. De meeste moderne desktopbrowsers zetten deze titels om in pop-ups tooltips die lezers helpen de betekenis van het object te identificeren door met de muis te bewegen, zelfs als er een tekstlabel van het object staat. Op dezelfde manier kan de titel ook op tekst worden toegepast voor het samenvouwen van een bericht, maar het kan een goed idee zijn om een hint te geven van het bestaan van het element door tekstdecoratie zoals onderstrepen te gebruiken. XML comment is meer geschikt voor technische informatie die normaal gesproken niet aan de lezer getoond zou moeten worden, maar aan andere gebruikers die de SVG-broncode kunnen bewerken.

De meeste mobiele browsers kunnen nu geen titelinhoud van nature weergeven, behalve de ene rechts onder het SVG-element, omdat er geen equivalent is met het schuiven van de aanwijzer op mobiele apparaten.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 50 50">
	<title>Titel van de volledige SVG-afbeelding</title>
	<g id="shapes">
		<title>Titel van de groep "shapes"</title>
		<rect x="0" y="0" width="10" height="20" fill="#f00">
			<title>Titel van de rechthoek</title><!--XML comment-->
		</rect>
		<circle cx="5" cy="5" r="3" fill="#0f0"/>
		<text x="2" y="30" text-decoration="underline">Tekst
			<title>Titel van de tekst</title>
		</text>
	</g>
</svg>

Geblokkeerde elementen en scripts

Om veiligheidsredenen accepteert MediaWiki geen SVG-bestanden die de volgende patronen bevatten:

<!-- not whitelisted namespaces -->
xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
xmlns="http://www.w3.org/1999/xhtml"
xmlns="http://www.example.org/notsvg"
xmlns="http://example.org/notsvg"
xmlns:bd="http://example.org/ExampleBusinessData"
<!--no external content-->
xlink:href="../resources/SVGFreeSans.svg#ascii"
xlink:href="animate-elem-09-t.svg"
xlink:href="url(#testPattern)"
<image xlink:href="http://example.org/image.jpg"/>
<d:testDescription href="http://www.w3.org/TR/SVG11/styling.html#StylingWithCSS">
<image xlink:href="data:image/svg+xml;base64,"/>
<!-- attributeName -->
<set attributeName="xlink:href"/>
<animate attributeName="xlink:href"/>
<set xlink:href='#s'/>
<set attributeName='xlink:href'/>
<!-- css -->
@import
url("../images/selector-types-visibility-hidden.css")
url(woffs/embeded-text-text-05.woff)
<!-- scripts -->
<script></script>
<!-- interactive -->
onactivate=""
onbegin=""
onclick=""
onend=""
onfocusin=""
onfocusout=""
onload=""
onmousedown=""
onmousemove=""
onmouseout=""
onmouseover=""
onmouseup=""

Om problematische svg-bestanden op te schonen, kunt u https://svgworkaroundbot.toolforge.org/ gebruiken (inschakelen sanitize potentially dangerous commands) (details).

Door de beperkte mogelijkheden kan de XML-Parser de volgende patronen niet herkennen en blokkeren:

<!--ATTLIST-->
<!DOCTYPE svg [
<!ATTLIST bar id ID #REQUIRED>
]>
<!--ENTITY with more than one element-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd" [
  <!ENTITY Smile "
    <rect x='.5' y='.5' width='29' height='39' fill='black' stroke='orange' stroke-width='2'/>
    <g transform='translate(0, 5)'>
      <circle cx='15' cy='15' r='10' fill='yellow'/>
      <circle cx='12' cy='12' r='1.5' fill='black'/>
      <circle cx='17' cy='12' r='1.5' fill='black'/>
      <path d='M 10 19 L 15 23 20 19' stroke='black' stroke-width='2'/>
    </g>
  ">
  <!ENTITY Viewport1 "<rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>">
  <!ENTITY Viewport2 "<rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>">
]>

Externe bestanden

Voordat u de definitieve versie van een SVG-afbeelding opslaat, moet u alle verwijzingen naar andere bestanden verwijderen die u hebt gebruikt om de SVG te maken (dit is wat wordt bedoeld met "linken"); als deze verwijzingen in de SVG-tekst blijven staan, zullen bij het opbouwen van de SVG de externe bestanden niet gevonden worden en zal dit opbouwen mislukken. Wikimedia blokkeert dergelijke uploads, zodat ze niet meer kunnen worden geüpload.

Opruimen

Het is ook een goed idee om ongebruikte definities (def's) te verwijderen, omdat deze de grootte van het bestand onnodig kunnen vergroten (behalve wanneer ze nodig zijn voor verdere bewerkingen, zoals standaardsjablonen).

Er zijn drie veelgebruikte SVG-optimizers: scour, svgcleaner en svgo, maar houd er rekening mee dat alle drie de optimizers tientallen openstaande bugs hebben en niet meer actief worden ontwikkeld, ^[16]^[17]^[18] voor meer optimalisatie-opties en hoe u ze kunt gebruiken, zie Optimizers gebruiken.

Maar wees u ervan bewust dat dit opruimen controversieel en vaak ongewenst is, zie Wanneer is het optimaliseren/valideren van bestanden ongewenst? voor details en redenen. Opruimen of valideren rechtvaardigt geen herupload ^[19]. Ongeldige elementen en attributen zijn vaak nodig voor een correcte weergave, en mogen niet worden verwijderd ^[20].

Gewone SVG, gecomprimeerde SVG, algemene specificaties

Met Inkscape en andere programma's kunnen gebruikers ook bestanden opslaan in SVGZ-formaat (gecomprimeerd binair SVG). Dit formaat wordt niet ondersteund op Commons en mag niet worden toegepast op afbeeldingen die hier worden geüpload. Dergelijke afbeeldingen kunnen niet worden geüpload.

In Adobe Illustrator en Inkscape zijn verschillende opties om op te slaan, zie Inkscape en Illustrator. In Inkscape zijn er drie mogelijke svg-opties: "Inkscape SVG", "gewone SVG" en "geoptimaliseerde SVG". Inkscape SVG's is het beste bestandsformaat om het bestand in Inkscape opnieuw te bewerken, anders wordt informatie zoals lagen of rasters verwijderd, dergelijke afbeeldingen moeten worden getagd met {{Created with Inkscape|IMPORTANT=yes}} om aan te geven dat ze niet geoptimaliseerd moeten zijn. Gewone SVG's worden identiek weergegeven als Inkscape SVG's en zijn iets kleiner. Geoptimaliseerde SVG maakt gebruik van een optimizer genaamd scour, die de bestandsgrootte nog verder kan verkleinen en enkele workarounds biedt voor librsvg-bugs, zoals phab:T217990^[21].

Lettertypen, tekst

Shortcut

COM:FONTS

Een aantal vrije lettertypen die op de Wikimedia-server zijn geïnstalleerd, kunnen worden weergegeven met behulp van de tag <text>. U kunt voorbeelden opbouw vinden op MetaWiki of de raw-lijst. Webfonts worden helemaal niet ondersteund. Sommige lettertypen zijn niet beschikbaar in de normale stijl, alleen in vetgedrukte of in andere, zoals cursief; overweeg alternatieven zoals Liberation. Overweeg om deze lettertypen te gebruiken en geen tekst naar paden te converteren om de volgende redenen:

Het opslaan als lettertype in plaats van een pad te gebruiken kan de totale bestandsgrootte aanzienlijk verminderen, vooral als het beeld grote hoeveelheden tekst bevat.
Andere editors kunnen typografische of grammaticale fouten in de afbeelding oplossen zonder de hele tekst te moeten opnieuw tekenen.
Tekst kan gemakkelijk vertaald worden in andere talen zonder de moeite om alle tekstlabels opnieuw te plaatsen door de lokaliserende bijdrager, een belangrijke kwaliteit aangezien Commons een meertalig project is. Paden vergen veel meer werk om te vertalen. Zie ook het sjabloon om te vertalen.
Teksten kunnen gemakkelijk worden gezocht met zoekmachines, die mogelijk geen padschema's herkennen.

Bovendien, als lettertypen worden geconverteerd naar paden, kunnen er auteursrechtelijke problemen zijn als het lettertype geen acceptabele vrije licentie heeft. (Dergelijke vectorafbeeldingen worden afgeleide werken van het lettertype.) Zie ook: WP:PD#Lettertypen en typefaces

SVG-bestanden die geen tekst naar padvorm mogen converteren, kunnen worden getagd met {{Path text SVG}}. Voor het koppelen van tekst wijzigbaar (wat we 'tekst' of 'lettertype' hebben genoemd) en tekst niet-wijzigbaar (d.w.z. op paden gebaseerde) versies van een SVG-bestand gebruik {{Vector text versions|…}}.

Demonstratie van de basisstappen voor het bewaren van de tekst voordat deze wordt geconverteerd naar het pad in Inkscape zodat de tekst selecteerbaar kan blijven (wanneer deze in real-time in de browser wordt geopend) en doorzoekbaar (door zoekmachines zoals Google).

Als u er nog steeds op staat om tekst naar pad te converteren om redenen zoals het gebrek aan ondersteuning van de functie textPath of een zeldzame glyph die niet aanwezig is in de meeste lettertypen, moet u de groep onbewerkte tekst dupliceren om de geconverteerde tekst te overlappen en het attribuut fill-opacity="0" stroke-opacity="0" aan deze groep toevoegen om de onbewerkte tekst te verbergen. Op deze manier kan de tekst in het originele SVG-bestand nog steeds handmatig worden doorzocht, aangeklikt en gemarkeerd door lezers. opacity="0" kan tot misverstanden leiden, omdat het de markering onzichtbaar maakt terwijl deze nog steeds selecteerbaar is. display="none" voorkomt dat lezers de tekst doorzoeken zonder toegang te krijgen tot de broncode.

Het converteren van tekst naar omtrek (pad) voordat SVG wordt geëxporteerd, is vooral populair onder Adobe Illustrator gebruikers omdat de vector grafische software geen attribuut text-align converteert naar text-anchor en de fallback fonts op Wikimedia andere font metrics hebben dan het gekozen lettertype door de afbeeldingsbijdrager. Dit leidt tot een onjuiste tekstpositionering en moedigt gebruikers aan om de voordelen van het behouden van onbewerkte tekst in het vectorbestand te negeren.

Niet weergegeven tekst (Flowed Text bug)

Beperkingen voor teksttransformatie

Vergelijking van SVG-weergave van onbewerkte tekst en tekst geconverteerd naar pad

Het schalen van lettertypen werkt nu niet zoals verwacht als de horizontale en verticale schalen (volgens de effectieve transformatiematrix) niet gelijk zijn (de horizontale rek wordt genegeerd: alleen de letterhoogte, berekend op basis van de matrix, wordt gehonoreerd); Dit kan voorkomen dat de tekst correct wordt weergegeven in smalle/gecondenseerde of uitgebreide stijlen van een ander lettertype, waarbij tekst onverwacht breed wordt en uit het verwachte vak vloeit (het alternatief is om een alternatieve vrije lettertypefamilie te selecteren die al versmald/gecomprimeerd is).

Tekst is gegarandeerd misplaatst (en in sommige gevallen lelijke overhang) als de resolutie van de PNG opbouw niet hetzelfde is als de interne dimensie die door het SVG-bestand zelf is gedefinieerd, ongeacht hoe "normaal" de schaalvermenigvuldiger is (bijv. 0,5, 2 of 4) (phab:T36947).^[31] Gebruik in ieder geval geen extreem kleine (>10px) of grote lettergrootte en schaal vervolgens de tekst of de hele afbeelding naar de gewenste grootte. Begin altijd met een redelijke lettergrootte (helaas heeft een grootte rond de 80px de voorkeur).^[32]

Pas ook op met verschillen in lettertype-statistieken: een SVG-bestand kan er goed uitzien als het direct wordt weergegeven in een SVG-compatibele (alle moderne) browser onder Windows of Mac OS (die veelgebruikte, maar niet-vrije lettertypen zoals Courier of Courier New kan gebruiken), maar zal er anders uitzien als het beperkt is tot de lijst met gratis lettertypen die nu worden ondersteund door de MediaWiki's SVG-naar-PNG-renderer (of wanneer het wordt bekeken onder besturingssystemen zoals gratis distributies van Linux), Zie ook rubriek "Lettertypevervanging en fallback-lettertypen".

Het attribuut textLength wordt niet volledig ondersteund en kan soms niet correct worden weergegeven. Zie phab:T15387.^[33]

Beperking van de schrijfmodus

RSVG herkent de eigenschap writing-mode, maar er zijn problemen met sommige lettertypen op Commons (vooral het standaardlettertype). Dat sommige lettertypen werken, suggereert dat het probleem bij het lettertype ligt in plaats van bij RSVG. Het probleem is dat de verticale spatiëring ervoor zorgt dat de tekens elkaar overschrijven (phab:T65236). De typische manier om verticale tekst te produceren werkt bijvoorbeeld niet:

<text x="50" y="50" writing-mode="tb-lr" font-size="15px">東涌綫</text>

De tijdelijke oplossing is om een lettertype op te geven dat werkt in plaats van te vertrouwen op het standaard Chinese lettertype (dat waarschijnlijk WenQuanYi Zen Hei is). Geschikte lettertypen zijn Noto Sans, CJK, SC of AR, PL, UKai, TW of monospace.

Lettertype substitutie en terugval lettertypes

SVG-lettertypespecificaties kunnen een specifieke font family gebruiken, zoals Arial of Times New Roman. Zo'n lettertypespecificatie betekent meestal dat de user-agent toegang moet hebben tot het lettertypebestand met die naam. Helaas zijn veel lettertypen propriëtair en niet op alle besturingssystemen beschikbaar. Niet alle besturingssystemen hebben bijvoorbeeld het eigen lettertype Arial. Als de specifieke lettertypefamilie niet beschikbaar is, wordt een standaardlettertype gebruikt; Het standaardlettertype kan er heel anders uitzien. Voor de user agent librsvg is het standaard lettertype Liberation Serif.

Veel user agents hebben een vervangingstabel waarmee de user agent een lettertypefamilie kan vervangen door een andere die dicht bij elkaar liggen. Om de afstemming van lettertypen te verbeteren, staat SVG toe dat de font-family een lijst met lettertypefamilienamen is; De user-agent gebruikt de eerste lettertypefamilie die wordt herkend. De graficus kan vergelijkbare Microsoft-, Apple- en Unix-lettertypen vermelden om de kans te vergroten dat de user-agent het gewenste lettertype heeft. Bovendien ondersteunt SVG de CSS-specificatie generieke lettertypefamilie^[34]^[35] Dat betekent dat de meeste SVG-useragents de generieke lettertypefamilies serif, sans-serif, cursive, fantasy en monospace moeten ondersteunen. Het is een goede gewoonte om een algemeen lettertypefamilie te gebruiken als laatste vermelding in de lijst met lettertypefamilies. Voor de librsvg op Commons:

sans-serif wordt gekoppeld aan DejaVu Sans
serif wordt gekoppeld aan DejaVu Serif
cursive wordt gekoppeld aan het niet interessante DejaVu Sans
fantasy wordt gekoppeld aan het niet interessante DejaVu Sans
monospace wordt gekoppeld aan DejaVu Sans Mono

Op Commons heeft librsvg de lettertypen die vermeld staan in deze vergelijking. Het gebruik van alleen die lettertypen zal goede resultaten opleveren in Wikipedia-artikelen die hun afbeeldingen weergeven met librsvg, maar grafische kunstenaars moeten zich er ook van bewust zijn dat SVG-bestanden kunnen worden weergegeven door andere user agents. Daarom is het het beste om algemene lettertypefamilies te gebruiken (zoals Arial) of een lijst met lettertypefamilies die eindigt op een generieke lettertypefamilie (zoals Trebuchet, sans-serif).

De lettertypestatistieken voor generieke lettertypefamilies, zoals sans-serif, zullen waarschijnlijk sterk variëren op verschillende user agents. In grafische illustraties zijn metrische exacte tekstelementen vaak belangrijk en Arial kan worden gezien als de facto standaard voor een dergelijke functie. Door zowel Arial als schreefloos lettertypen toe te voegen als fallback-lettertypen, kan de SVG zo goed mogelijk worden weergegeven op machines die Arial niet hebben of vervangen. Om het SVG-bestand onafhankelijk te maken van Arial, wijzigt u alle exemplaren van font-family: Arial naar font-family: 'Liberation Sans', Arial, sans-serif.

Als u niet-westerse karakters gebruikt, moet u de lettertypen definiëren die voorafgaan aan Liberation Sans. Als uw tekst bijvoorbeeld Chinese karakters bevat, moet de definitie van de lettertypefamilie zijn: ' Liberation Sans, Arial, WenQuanYi Zen Hei, SimHei, sans-serif'. In dit geval worden westerse lettertypen vooraan geplaatst omdat de kwaliteit van westerse karakters in Chinese lettertypen vaak laag is, en we eerst de hogere kwaliteit willen gebruiken.

Inkscape begint met het ondersteunen van fallback-lettertypen vanaf versie 0.91.
Adobe Illustrator versie 18.1.1 of eerder (waarschijnlijk ook in latere versies) ondersteunt geen fallback-lettertypen, dus het SVG-bestand moet handmatig worden bijgewerkt in een teksteditor nadat het is opgeslagen.

gewenst lettertype	Wiki-fallback	mogelijke fallback-definitie, die lijkt op de andere (werkt op Wikimedia/Windows/Linux/Mac)
[-geen definitie-]	Liberation Serif
serif	DejaVu Serif^[36]	`font-family="serif"`
Times New Roman	Liberation Serif	`font-family="Liberation Serif,Times New Roman,Times,Times-Roman,serif"`
sans-serif	DejaVu Sans^[36]	`font-family="sans-serif"`
Arial	Liberation Sans	`font-family="Liberation Sans,Arial,Nimbus Sans L,Helvetica,sans-serif"`
Helvetica	Nimbus Sans L	`font-family="Nimbus Sans L,Ubuntu,Liberation Sans,Helvetica,Arial,sans-serif"`
Calibri		`font-family="Liberation Sans,Carlito,Calibri,Segoe UI,Myriad,UnDotum,Optima,Tahoma,Arial,sans-serif"`
monospace	DejaVu Sans Mono	`font-family="monospace"`
Courier New	Liberation Mono	`font-family="Liberation Mono,Courier New,Courier,monospace"`
[-alle onbekende-]	DejaVu Sans

Lay-out met elementen text en tspan

Hoewel u alleen het element text kunt gebruiken om eenvoudige tekst in het beeld te weergeven, kan het element tspan nuttig zijn om tekst te behandelen waarvan de positie van het woord afhankelijk is van de andere. ^[37] Een tspan element moet worden vernest in het element text, en dan kan meer tspan worden vernest binnen dit tspan, alle stijl die in het ouder-text element wordt gedefinieerd, wordt geërfd door zijn child tspan elementen. Bijvoorbeeld:

<g font-size="12px">
  <text font-weight="bold" x="10" y="10">Wikipedia hosts kennis
    <tspan fill="blue"> bijgedragen 
      <tspan text-anchor="end" dy="12"> door vrijwilligers</tspan>
    </tspan>
  </text>
  <text font-style="italic" x="15" y="30">Wikimedia Commons host gratis mediabestanden voor alle zusterprojecten.</text>
</g>

Het belangrijkste verschil met de structuur "g nesting text" is dat weinig belangrijk gedrag van de tekstlay-out exclusief is voor tspan : wanneer meerdere text elementen achter elkaar worden opgesteld, positioneren ze zich nog steeds onafhankelijk; Als meerdere tspan elementen achter elkaar zijn uitgelijnd, maar de tweede en volgende tspan elementen geen absolute x-coördinaat krijgen, zal de tekst van deze tspan elementen horizontaal worden uitgelijnd direct naast het einde van het teken van de voorafgaande tspan in hetzelfde text element.

tspan moet echter spaarzaam worden gebruikt, zelfs als u de absolute x-coördinaat definieert voor elk afzonderlijk tspan element in het text element. Dit komt omdat onder de standaard definitie xml:space elk regeleinde (binnen tekst of tspan) met een extra volgruimte automatisch wordt geconverteerd naar een spatieteken.^[38] Als er meerdere opeenvolgende regeleinden zijn, worden deze nog steeds als één spatie behandeld. Dit zou geen probleem zijn als het regeleinde wordt gevolgd door een tspan element met absolute x-coördinaat en links wordt uitgelijnd (text-anchor=start, de standaardwaarde). Als xml:space de waarde 'preserve' krijgt, vertaalt librsvg de inspringing naar een lang wit tab character dat gelijk is aan 8 spatietekens. Omdat de automatische opmaak of het opnieuw inspringen (indent style) van de meeste XML-editors automatisch een inspringing maakt voor elke nieuwe onderliggende XML-tag, moet u voorzichtig zijn met het opnieuw inspringen als uw SVG-bestand een dergelijk gebruik van tspan bevat.

Het gedrag in verschillende SVG-renderers voor dit probleem varieert sterk en is meestal inconsistent met de W3C-specificatie (ook de 'preserve' waarde van xml:space wordt afgeschaft in SVG 2.^[39]). Het enige probleem met librsvg is dat het nooit het regeleinde alleen omzet in spatie, ongeacht welke waarde van xml:space wordt gegeven als er geen volgspatie of inspringing is voor de tag tspan. Met uitzondering van librsvg voegen bijna alle moderne browsers altijd het geconverteerde spatieteken direct na de voorgaande tekst toe, dit is de reden waarom de end of middle waarden van de eigenschap text-anchor de tekst 1 spatie altijd naar links uitlijnen omdat de nieuwe regel en/of de volgende tab of spatie na de afsluitende tag tspan wordt geconverteerd naar een onverwacht spatieteken.^[40]

Opnieuw inspringen	XML-code	Resultaat
Voor	<text> <tspan>O</tspan><tspan>n</tspan><tspan>e</tspan> </text>	One
Na	<text> <tspan>O</tspan> <tspan>n</tspan> <tspan>e</tspan> </text>	O n e

Inkscape is buggy om tspan te renderen, bijvoorbeeld, het erven van de eigenschap text-anchor van het eerste tspan element onjuist voor de daaropvolgende tspan elementen, zelfs als de eigenschap specifiek een waarde in alle tspan elementen wordt gegeven.^[41] In dat geval, gewoon omzetten van de "text nestling tspan" structuur naar gewoon "g nestling text". Inkscape is ook standaard voor xml:space="preserve" om ruimte tussen tspan te behandelen. Als u zich volledig bezorgd bent over hoe uw SVG in Inkscape verschijnt, maar de standaard xml:space handling voorkeur geeft, gebruik dan   om elke algemene ruimte te vervangen zodat deze niet verborgen blijft in Inkspace.

Als u een SVG genereert met Adobe Illustrator, krijgt u tijdens het dialoogvenster Opslaan de opties "Minder elementen uitvoeren" en "Element gebruiken voor tekst op pad". Om de consistentie van het uiterlijk van uw lettertype op verschillende browserplatforms te maximaliseren, moet u een vinkje naast het eerste plaatsen en ervoor zorgen dat er geen vinkje naast de andere staat. Als u dit niet doet, kan de spatiëring van sommige van uw letters ertoe leiden dat ze elkaar overlappen (afhankelijk van uw browser).

Regelovergang

SVG 1.1 biedt geen enkele vorm van Regelovergang (hard of zacht). Elke lijnomloop moet handmatig worden gedaan door nieuwe text of tspan elementen te verplaatsen met dezelfde absolute x-coördinaat en een nieuwe y-coördinaat. Voor tspan elementen kan de y-coördinaat van de volgende regel worden ingesteld met het attribuut dy. Hoewel textPath een vergelijkbare situatie aankan,^[42] wordt dit element niet ondersteund door librsvg/Wikimedia (phab:T11420).

Een concept van SVG 1.2 heeft een regelovergang (line wrap), maar er is weinig ondersteuning.

Dit concept behandelt ook regelovergang ook voor URL's, maar Chrome, Firefox, Edge en librsvg ondersteunen het niet (status mei 2018).

class opmaak lettertype

Meestal is het gewoon gebruik van het 'attribuut style'. Om het proces van het bijwerken van letterfamilie voor elke tekst of tspan-element te vergemakkelijken, kunt u de lettertype CSS-classes definiëren binnen 'style element' en de class eigenschap toepassen in elementen als dit:

<style type="text/css">
text {font-size:12px; font-family:Liberation Sans, Arial, sans-serif} <!-- Algemene lettertypen opmaak -->
.small {font-size:9px}
.special {fill:#f93500; font-weight:bold}
.title {font-size:14px; font-weight:bold; font-family:Liberation Serif, Times New Roman, serif}
.italic {font-style:italic}
</style>
<text class="title" x="10" y="20">Qridfs</text>
<text x="10" y="30">Rfnkl fgkj qljf fgk gskla</text>
<text class="small">
  <tspan x="15" y="40">Dfj fdmnkl</tspan>
  <tspan x="15" dy="12" class="italic">Akgfld fkdngf mna</tspan>
</text>
<text class="special" x="10" y="60">Tcjgh xlij qpfj</text>

CSS-class gedefinieerd in 'style element' kan ook worden gebruikt voor andere SVG-elementen (bv. g en path) ondanks het misleidend type="text/css" attribut. Zelfs als een bepaalde style eenmaal in de SVG wordt gedefinieerd, wordt het nog steeds aangeraden de style te vervangen door een class voor een nettere lay-out van XML.

In tegenstelling tot de algemene overtuiging scheidt het attribuut style geen inhoud van de presentatie af, en tenzij u de eigenschappen moet overschrijven die zijn ingesteld door een CSS-selector, is het beter om de SVG-formateringattribuuten in plaats daarvan te gebruiken (bijv. <path fill="#fff" stroke="none"/> in plaats van <path style="fill:#fff;stroke:none"/>).^[43] Als u echter het style-element dat in het style-element wordt gedefinieerd wilt overschrijven, moet u het style-attribut gebruiken. Als u de stijl moet overschrijven voor het text element zonder style-attribuut, kunt u een tspan-elementcontainer gebruiken om de tekst te nestelen die u nodig hebt om de style te overschrijven, met de veronderstelling dat er niets vooraf gedefinieerd is in het style-element voor het tspan element.

Notitie

phab:T68672 – CSS-style element wordt genegeerd als de standaardwaarde type="text/css" wordt weggelaten.
phab:T43423 – CSS child selectors worden niet ondersteund door librsvg.
phab:T68551 – CSS-classes op text elementen worden niet overgeërfd op onderliggende tspan elementen. Als u dit wilt, moet u ook een aparte class voor tspan toevoegen, of gewoon groepen gebruiken (maar niet in het text element zoals Scour het helaas doet).

Tekst met achtergrondrand

Soms is de tekst onleesbaar omdat de achtergrondkleur weinig contrast heeft met de lettertype of het patroon te ingewikkeld is waardoor de lezer in de war raakt. Dit kan worden opgelost door de tekst in exact dezelfde positie te dupliceren, maar de achterste tekst met lijn en de voorste tekst zonder, dan wordt deze tekst als volgt:

<text style="font-size:12px">
  <tspan x="10" y="20" style="stroke:white; stroke-width:3px; stroke-linejoin:round;">Placeholder</tspan>
  <tspan x="10" y="20">Placeholder</tspan>
</text>

"stroke-linejoin:round" wordt gedefinieerd om een scherpe hoek van de tekstlijn te vermijden.

Het probleem met het toepassen van lijn en vulling op hetzelfde tekstelement is dat de lijn wordt weergegeven 'over' de hoofdtekst van de tekst, waardoor deze anders onleesbaar wordt als het lettertype te klein is, maar een grotere lijn nodig heeft om te onderscheiden van de achtergrond.

SVG-filters kunnen worden gebruikt om de tekst over een verwijde versie van de tekst te tekenen. Het filter breidt eerst de tekst uit, stelt de kleur van de uitgevouwen tekst in en tekent vervolgens de oorspronkelijke tekst over de verwijde versie. Er kan één filter worden gedefinieerd, en dat filter kan worden gebruikt door verschillende tekstblokken:

<filter id="textBack">
  <feMorphology in="SourceAlpha" operator="dilate" radius="1" result="bloom" />
  <feFlood flood-color="white" flood-opacity="1" result="flback"/>
  <feComposite in="flback" in2="bloom" operator="in" result="surround" />
  <feMerge>
    <feMergeNode in="surround" />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>
<text x="10" y="50" filter="url(#textBack)">gibberish</text>
<text x="10" y="70" filter="url(#textBack)">more gibberish</text>

SVG-filters kunnen ook worden gebruikt om de grootte van een ondoorzichtige rechthoekige achtergrond rond de tekst aan te passen. Het gebruik van een filter is robuuster dan het tekenen van een rechthoek en vervolgens de tekst bovenop die rechthoek plaatsen. Een rechthoek met een vaste grootte past mogelijk niet in het lettertype dat voor de tekst wordt gebruikt; De grootte van de rechthoek moet ook worden aangepast als de tekst verandert. Als de tekst bijvoorbeeld wordt vertaald, kan het nodig zijn om de rechthoek te wijzigen. Met behulp van een filter wordt de grootte automatisch aangepast.

<filter id="rectBack" x="-2%" y="0%" width="104%" height="100%">
  <feFlood flood-color="white" flood-opacity="1" result="rect"/>
  <feMerge>
    <feMergeNode in="rect" />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>
<text x="10" y="50" filter="url(#rectBack)">gibberish</text>
<text x="10" y="70" filter="url(#rectBack)">more gibberish</text>

Het omlijnen van tekst kan zonder filters worden gedaan door de tekst expliciet twee keer weer te geven. De eerste keer wordt de tekst weergegeven met een witte lijn om de omtrek aan te geven. De witte omtrek tast de tekst aan. De tekst wordt een tweede keer weergegeven, maar deze keer wordt de tekst niet gestreept. Bijgevolg worden de karakters op ware grootte weergegeven (zonder erosie).

Als u veel tekst hebt die moet worden weergegeven met een lijnachtergrond, kunt u de tekst handmatig opnemen in <g>, <text> en <tspan>elementen. Het <g> element dat eronder wordt weergegeven, past de lijn toe, vervolgens de tekstgroep <use> van het <text> element zonder lijn en vult het lettertype met contrasterende kleuren:

<g style="stroke:white; stroke-width:3px; stroke-linejoin:round">
  <text id="text_group" style="font-size:12px">
    <tspan x="10" y="80">Placeholder 1</tspan>
    <tspan x="10" y="95">Placeholder 2</tspan>
  </text>
</g>
<use xlink:href="#text_group" style="fill:black; stroke:none"/>

W3C bevat de eigenschap paint-order in SVG 2.0 waarmee de order de attributen "fill", "stroke" en "markers" kan weergeven binnen één element dat handmatig door de gebruiker is gerangschikt, in plaats van de standaard verplichte volgorde te volgen.^[44] Mozilla Firefox bevat ook dit attribuut experimenteel, maar het is de standaard om het in de stabiele release te deactiveren totdat SVG 2.0 stabiel is. Deze functie kan worden ingeschakeld in de about:config van Firefox. ^[45]

Kleurverlopen

Gebruikers van Inkscape versie 0.46 zullen merken dat afbeeldingen met "Kleurverloop vullen" perfect worden weergegeven op Inkscape, maar "verknoeid" worden weergegeven in Opera- of Firefox-browsers. Een mogelijke oorzaak is dat de dekking van de laatste "stop" van een kleurverloop op een opacity van 0 staat. Inkscape lijkt deze laatste stop te negeren, maar zowel Firefox 3.0.6 als Opera 9.36 zullen het weergeven als een witte rand in het gevulde object. Oplossingen zijn ofwel het verwijderen van de laatste stop (omdat deze waarschijnlijk per ongeluk is gemaakt) of het wijzigen van de dekking (en kleur) zodat de afbeelding correct wordt weergegeven in alle browsers.

Merk op dat Inkscape een JavaScript polyfill toevoegt aan SVG-afbeeldingen met mesh-verlopen. Gescripte SVG-afbeeldingen kunnen niet worden geüpload naar Wikimedia Commons, maar het verwijderen van de JavaScript-code zal de verlopen doorbreken.

Gebruikers van Adobe Illustrator CS5, CS6 of CC en die ook Firefox gebruiken, kunnen opmerken dat een Illustrator-"symbool" dat een verloop bevat, normaal wordt weergegeven als een Commons PNG-bestand, maar als het SVG-bestand zelf in Firefox wordt geopend, deze symbolen leeg worden weergegeven. Andere browsers zullen geen problemen ondervinden - Google Chrome, zelfs Internet Explorer zal de SVG-symboolverlopen van Illustrator correct weergeven, maar vanwege een bekende bug waarvan de ontwerpers van Firefox al sinds 2005 op de hoogte zijn (Mozilla's Bugzilla bug 376027 en andere rapporten die ertoe leiden, zoals bug 353575) maar die tot nu toe niet adequaat zijn opgelost, Firefox geeft dergelijke symbolen weer als lege vormen (symboolstreken en symboolpaden zonder verlopen worden niet beïnvloed).

Adobe Illustrator-gebruikers moeten er ook rekening mee houden dat alle Illustrator "symbolen" die paden bevatten met zowel een kleurverloop en een filter alleen als een PNG in Commons worden weergegeven in de eerste instantie van het gebruik van dat symbool. Als u later een symbool gebruikt dat deze paden bevat, worden de paden (maar niet het hele symbool) leeg (er wordt geen verloop of filter, vulling of lijn toegepast).

Vervagen

Wikimedia's SVG-renderer ondersteunt momenteel verschillende filtereffecten, maar sommige effecten zoals gaussian blur (Gaussiaanse vervaging) gedragen zich anders wanneer het wazige object de rand van de eigenlijke afbeelding overschrijdt. De huidige versie van RSVG behandelt de bijgesneden rand als de werkelijke rand van het object om het effect toe te passen (alsof het object clipPath heeft toegepast voordat het filtereffect wordt toegepast), waardoor een ongewenst filtereffect tegen de afbeeldingsrand ontstaat.

Grootte

De maximum bestandsgrootte op Commons is 4 GiB (4.294.967.296 bytes) voor gebruikers van UploadWizard en andere hulpmiddelen die gesegmenteerde uploads ondersteunen. Hoewel grote bestanden kunnen worden geüpload, veroorzaken ze problemen wanneer de gebruiker het bestand opent.
De maximale grootte voor miniaturen voor SVG-bestanden is 10 MB.
De aanbevolen beeldhoogte is ongeveer 400-600 pixels

De bestandsgrootte verkleinen

Als het bestand te groot is, moet het verkleind/geoptimaliseerd worden door:

met behulp van een speciaal programma
- een SVG optimizer, getoond in § Specialized app
- Inkscape, opslaan als een geoptimaliseerd svg-bestand
het handmatig bewerken van het bestand
- handmatig uw code opschonen^[46]
- editor en regex, voorbeeld
- groepen aanmaken
- de precisie van de getallen verminderen.^[47]^[48]
- onnodige code verwijderen, zoals:
  - verwijderen van ongebruikte definities (defs), omdat deze onnodig de grootte van het bestand kunnen opblazen
  - commentaar, code-opmaak, spaties, maar het zal de code minder leesbaar maken en meestal een verwaarloosbare impact hebben op de bestandsgrootte en de tijd om de afbeelding op te bouwen.
het bewerken van het programma (script) voor het maken van het bestand en:
- minder punten gebruiken voor curves
- minder curves tekenen

Vertalingen

SVG-bestanden kunnen vertaald worden en kunnen meertalig zijn (ingesloten vertalingen). Voor meer informatie, zie deze pagina.

Naar SVG converteren

Opnieuw genereren

Als de afbeelding is gegenereerd door een programma (in plaats van met de hand getekend) - bijvoorbeeld een grafiek uit een spreadsheet - is het mogelijk om het uitvoerformaat in te stellen op SVG, in plaats van PNG of een ander formaat, en zo een SVG-afbeelding uit dezelfde bron te produceren. Indien mogelijk is dit over het algemeen het gemakkelijkst.

Converteren

Veel vectorbestandsindelingen kunnen eenvoudig worden geconverteerd naar SVG door simpelweg het formaat te wijzigen (de bestaande gegevens opnieuw in te pakken), met behulp van een conversieprogramma. Dit kan zo simpel zijn als het openen van het bestand in een vectorafbeeldingseditor en het vervolgens opslaan in SVG.

Voor rasterafbeeldingen (bitmapafbeeldingen) kan dit niet worden gedaan omdat de afbeelding een set van individuele pixelwaarden is, niet een set lijnen (vectoren). Voor deze afbeeldingen (met name PNG-afbeeldingen) kan men converteren naar SVG via "vectorisatie" of "tracing" - waarbij automatisch een vectorafbeelding wordt gegenereerd op basis van een rasterafbeelding.

Veel SVG-editors hebben overtrekfuncties en er bestaan speciale converters. In Inkscape wordt dit gedaan door het programma potrace.^[49]^[50] Concreet: open de bitmap (Bestand → Open... (Ctrl-O)) en selecteer vervolgens Pad → Bitmap overtrekken... (Shift-Alt-B). Er zijn verschillende mogelijkheden; verwijder na gebruik de onderliggende bitmap en overweeg het pad te vereenvoudigen om het aantal knooppunten te verminderen (Ctrl-L).

Adobe Illustrator maakt het ook mogelijk om bitmapafbeeldingen om te zetten in vectoren via de functie Image Trace. Daarbij moet ervoor worden gezorgd dat de resulterende vectorafbeelding niet zwaar groot is (vaak het resultaat van te veel conversiegetrouwheid met betrekking tot kleur en vorm) en ook niet zo eenvoudig dat deze de getrouwheid aan de oorspronkelijke afbeelding verliest. Geconverteerde afbeeldingen vereisen bijna altijd enige handmatige correctie na conversie. Net als in Inkscape moet de onderliggende bitmap worden verwijderd nadat de conversie is voltooid.

Er moet ook worden opgemerkt dat wanneer Illustrator een van zijn bestanden converteert naar een SVG-bestand, het de neiging heeft om een aantal schaduweffecten zoals "binnengloed", "buitengloed" en verlopen die langs of over een pad worden toegepast, om te zetten in ongewenste rasterafbeeldingen die het vervolgens met behulp van links in de SVG-afbeelding insluit. Dergelijke ingesloten afbeeldingen kunnen vaak onmiddellijk worden gedetecteerd door de afbeelding in een webbrowser onder hoge zoom te bekijken, waar ze troebel lijken of zichtbaar gekartelde randen hebben (geen van beide is ooit het geval bij een correct weergegeven vectorafbeelding). Aangezien deze effecten oorspronkelijk zijn gemaakt zonder rekening te houden met het W3C-consortium, biedt Adobe geen oplossing voor het probleem en zal het waarschijnlijk ook nooit een oplossing voor het probleem hebben.

Om rastercomponenten uit een door Adobe Illustrator gegenereerde SVG te verwijderen voordat de afbeelding naar Commons wordt geüpload, moet men eerst kunnen identificeren waar Illustrator ze heeft geplaatst. Dit kan op de volgende manier:

Voltooi eerst het bewerken van een afbeeldingsbestand en sla het op in het AI-formaat van Illustrator (*. AI) en sla het vervolgens opnieuw op in SVG-indeling. Kies tijdens het tweede dialoogvenster Opslaan ervoor om de links (voorlopig) te "embedden". Sluit vervolgens de afbeelding (Bestand=>Sluiten of Ctrl+w). Open vervolgens de SVG-versie weer, klik op "Venster" aan de rechterkant van de bovenste menubalk en scrol omlaag naar "Links". Dit opent een klein venster met informatie over elk van de links (indien aanwezig) die in de SVG-afbeelding bestaan (ongeacht of Illustrator ze heeft gemaakt of niet). U kunt op een van de items in de bovenste helft van het venster klikken en vervolgens de knop "Ga naar link" selecteren die zich ongeveer in het midden ervan bevindt - dit brengt u naar dat specifieke raster zodat u het kunt identificeren en het kunt verwijderen of vervangen door een alternatief dat niet op rasters is gebaseerd.

Houd er rekening mee dat deze SVG-versie van uw afbeelding, wanneer deze in Illustrator wordt bekeken, er anders uit kan zien dan hetzelfde SVG-bestand waarvan u dacht dat u het slechts een paar minuten eerder had opgeslagen: dit komt omdat Illustrator tijdens het maken van dat bestand een reeks codes heeft gemaakt die het vervolgens moeilijk kan lezen (SVG is geen Illustrator-eigen formaat, AI is dat wel, en hoewel Illustrator nooit moeite zal hebben om een AI-bestand (Adobe Illustrator) correct te bekijken, zal het soms moeite hebben om een SVG correct weer te geven, zelfs een die het zelf heeft geproduceerd). Gelukkig zal zelfs een SVG die er verwarrend uitziet in Illustrator meestal op zijn minst correct lijken op te bouwen in de meeste browsers (met af en toe een en al genoemde uitzondering van Firefox) en in Inkscape.

Een nieuwe maken

Als een afbeelding niet opnieuw kan worden gegenereerd of geconverteerd, is er de optie om de afbeelding opnieuw te maken: teken een nieuwe SVG-afbeelding en gebruik de bestaande afbeelding als model. Dit is handmatig en de meest tijdrovende optie, maar het kan uiteindelijk de hoogste kwaliteit opleveren.

In alle gevallen kan het nuttig zijn om de resulterende afbeelding bij te werken in een SVG-editor - misschien door details toe te voegen die moeilijk of onmogelijk te produceren zijn in het oorspronkelijke programma, of door een complexe conversie te vereenvoudigen of te verfijnen (zoals het vereenvoudigen van een pad dat met 100 punten wordt beschreven naar een pad dat met 5 punten wordt beschreven, als extra punten onnodige details toevoegen).

Zodra u een SVG-afbeelding heeft gemaakt, upload u deze (onder een nieuwe naam) en tagt u de originele rasterafbeelding met {{Vector version available}}, maar verwijder de rasterafbeelding niet en meld deze ook niet voor verwijdering, omdat het nog steeds een aantal doelen dient - zie de details.

Uploaden en categoriseren

Elk SVG-bestand dat naar Wikimedia Commons wordt geüpload, moet laten zien hoe het is gemaakt: gebruik sjabloon {{Inkscape}}, {{Adobe}}, {{HandSVG}}, enz.

U moet het uiterlijk en de geldigheid controleren vóór u het bestand uploadt; Gebruik het hulpmiddel SVG Checker

Als u het niet zeker weet of u eerst wilt zien hoe librsvg het bestand zal opbouwen, upload het dan naar Test.svg

Afbeeldingsbeschrijvingpagina's

Uploaden wordt beschreven op deze pagina.

Zorg ervoor dat u het vak {{Information}} zo volledig mogelijk invult. Vaak is het een hulp als een afbeelding een volledig informatievak heeft, omdat dit het categoriseren door anderen gemakkelijker maakt en anderen in staat stelt betere vertalingen te maken.

Zie de sectie § SVG software tags voor gedetailleerde informatie over SVG-media.

SVG-bestanden categoriseren

Alle SVG-afbeeldingen moeten worden gesorteerd in de juiste subcategorie of subcategorieën van Category:SVG files. Plaats afbeeldingen niet rechtstreeks in de bovenliggende categorie, omdat deze overvol en nutteloos wordt (we hebben ~~duizenden en duizenden van~~ meer dan 100.000 SVG-bestanden).

Sorteer subcategorieën die niet afhankelijk zijn van onderwerp maar op technische aspecten ("gemaakt met...", "geanimeerd", "geldig", enzovoort) op '*' om ze buiten de alfabetische lijst te houden.

De SVG categorie-boom

De boom is Category:SVG, als deel van Category:Images → Category:Media types.

Wat betreft het aanmaken van thematische subcategorieën is het niet nodig om de volledige hiërarchieboom van Category:Topics opnieuw op te bouwen. Normaal gesproken is het voldoende om enkele onderwerpen in één te verzamelen. Category:SVG colors zou bijvoorbeeld alle kleurgerelateerde SVG-bestanden van Category:Colors kunnen bevatten, dus het heeft geen zin om Category:SVG red, Category:SVG blue enzovoort aan te maken. Misschien zullen sommige subcategorieën later nuttig worden, maar blijf dicht bij de bestaande boom en plaats geen SVG-bestanden alleen in een SVG-categorie: Categorieën zijn in de eerste plaats bedoeld voor het 'vinden van media, niet voor het verbergen ervan. Categoriseer niet te veel.

Zie deze pagina voor algemene informatie.

Naamconventies voor categorieën

Categorienamen beginnen met 'SVG', gevolgd door het onderwerp in kleine letters (tenzij het een eigennaam is). Een categorie met SVG-bestanden met betrekking tot scheikunde wordt bijvoorbeeld Category:SVG chemistry. Er was lange tijd geen naamgevingsconventie, dus het kan zijn dat u titels ziet die niet overeenkomen met dit formaat. Deze zullen in de loop van de tijd worden aangepast.

SVG-bestanden taggen

Zie Category:SVG marker templates voor alle beschikbare SVG-markers.

Transcluded from Commons:SVG marker templates

SVG software tags

Use always at least the W3C-validity/invalidity flag! To get easily the best results use Image generation

You will find the complete up-to-date list at SVG created with ... templates
For the software used (Category:SVG graphics by software used):

{{Adobe|v}}, sorts into Valid SVG created with Adobe Illustrator

This vector image was created with Adobe Illustrator.

{{Bin2svg|v}}, sorts into Valid SVG created with bin2svg

This table was created with bin2svg.

{{Chemdraw|v}}, sorts into Valid SVG created with ChemDraw

This structural formula was created with ChemDraw.

{{CorelDraw|v}}, sorts into Valid SVG created with CorelDRAW

This vector image was created with CorelDRAW.

{{created with Dia|v}}, sorts into Valid SVG created with Dia

This diagram was created with Dia.

{{ElCompLib|v}}, sorts into Valid SVG created with electrical symbols library

This circuit diagram was created with the Electrical Symbols Library.

{{Fig2SVG|v}}, sorts into Valid SVG created with Fig2SVG

V

This vector image was created with Xfig and a Fig-to-SVG conversion tool.

{{Gnuplot|v}}, sorts into Valid SVG created with Gnuplot

This plot was created with Gnuplot.

{{HandSVG|v}}, sorts into Valid SVG created with Text Editor

The SVG code is valid.

This vector image was created with a text editor.

{{Inkscape|v}}, sorts into Valid SVG created with Inkscape

This vector image was created with Inkscape.

{{Inkscape-hand|v}}, sorts into Created with Inkscape-hand

The SVG code is valid.

This vector image was created with Inkscape, and then manually edited

.

{{Metapost|v}}, sorts into Valid SVG created with MetaPost

This vector image was created with MetaPost.

{{Sodipodi|v}}, sorts into Valid SVG created with Sodipodi

This vector image was created with Sodipodi.

{{Scribus|v}}, sorts into Valid SVG created with Scribus, also for typesetting

This vector image was created with Scribus.

{{Created with Text Editor|3=v}}, sorts into Valid SVG created with Text Editor

The SVG code is valid.

This vector image was created with a text editor.

{{Image generation|O|v}} or {{Image generation|U|v}}, sorts into Valid SVG created with Other tools

This vector image was created with another SVG tool.

This vector image was created with an unknown SVG tool.

{{Created with Vim|2=v}}, sorts into Valid SVG created with Vim

This vector image was created with Vim.

{{Extracted with Inkscape|2=v}}, sorts into Valid SVG extracted with Inkscape

This vector image was extracted with Inkscape.

For other software, by now categorize as usual, see SVG created with ... templates and Created with ... templates for an summary of software-related templates

See #Software section for a list of programs.

SVG file tags

For making use of elements from other SVG images available on Commons, please use {{Attrib}} — see Category:Vector images using elements from other vector images.

This image includes elements that have been taken or adapted from this file:

Example.svg.

{{Translate}}

This SVG file contains embedded text that can be translated into your language, using any capable SVG editor, text editor or the SVG Translate tool. For more information see: About translating SVG files.

{{Translate|switch=yes}}

This file is translated using SVG <switch> elements. All translations are stored in the same file! Learn more.

For most Wikipedia projects, you can embed the file normally (without a lang parameter). The Wikipedia will use its language if the SVG file supports that language. For example, the German Wikipedia will use German if the SVG file has German. To embed this file in a particular language use the lang parameter with the appropriate language code, e.g. [[Help:SVG/nl|lang=en]] for the English version. Do not specify a lang parameter if it is not needed. The parameter may prevent the use of a subsequent translation.

To translate the text into your language, you can use the SVG Translate tool. Alternatively, you can download the file to your computer, add your translations using whatever software you're familiar with, and re-upload it with the same name. You will find help in Graphics Lab if you're not sure how to do this.

For animations you can use {{Animated SVG|B|C}}

This image is an animated SVG file. The .png preview above created by RSVG for use in Wikimedia is not animated and may be incomplete or incorrect. To see the animation, open the original file. It should run in any modern browser or viewer. Recent versions of Chrome, Firefox, Microsoft Edge, Safari, and Opera all support SVG animated with SMIL. Other SVG animations can be found at Category:Animated SVG files.

Templates:Animated SVG/I18n

العربية ∙ Boarisch ∙ বাংলা ∙ català ∙ čeština ∙ Deutsch ∙ Deutsch (Sie-Form) ∙ English ∙ español ∙ فارسی ∙ suomi ∙ français ∙ galego ∙ עברית ∙ हिन्दी ∙ magyar ∙ հայերեն ∙ íslenska ∙ italiano ∙ 日本語 ∙ 한국어 ∙ lietuvių ∙ македонски ∙ മലയാളം ∙ Plattdüütsch ∙ Nederlands ∙ occitan ∙ português ∙ português do Brasil ∙ русский ∙ sicilianu ∙ slovenščina ∙ svenska ∙ தமிழ் ∙ ไทย ∙ українська ∙ 中文 ∙ 中文（简体） ∙ 中文（繁體） ∙ +/−

.

SVG files containing JavaScript cannot be uploaded at present, but this template anticipates that possibility {{Scripted SVG}}.

This is a scripted SVG file (it contains JavaScript). The preview above may be incomplete or incorrect. To use the interactive possibilities, open it in your browser.

SVG conversion tags

If you find raster images that should be vector graphics — especially diagrams, charts, graphs and some drawings —, tag them {{convert to SVG|A|B}}. Special: For Nuvola {{N2+SVG}}.

All Ba images in this gallery could be re-created using vector graphics as SVG files. This has several advantages; see Commons:Media for cleanup for more information. If an SVG form of this image is available, please upload it and afterwards replace this template with {{vector version available|new image name}}.

If you find raster animations (usually GIFs) that should be animated vector graphics, tag them {{convert to SVG animation}}.

All images in this gallery could be re-created using vector graphics as SVG animation files. This has several advantages; see Commons:Media for cleanup for more information. If an SVG form of this image is available, please upload it and afterwards replace this template with {{vector version available|new image name}}.

To indicate that you are currently working on a vector version of a raster image you can tag it with {{Vector wip|1=~~~|time=~~~~~}}.

SVG work in progress

This file is actively undergoing vectorizing or optimizing, which may take a while. To avoid edit conflicts or unnecessary work, please refrain from vectorizing or optimizing it yourself until this message is removed. The SVG will be available soon….
For usage it is recommended to take: {{Vector wip|1=~~~|time=~~~~~}}

This page was last revised by FuzzyBot at 22:47, 1 november 2024 (UTC).

For SVG files using embedded bitmaps causing bad quality, use {{BadSVG}} and for rasters that have been superseded by a SVG file, use {{vector version available|File name.svg}}

All the SVG images in this gallery contain embedded raster graphics.^[1] Such images are liable to produce inferior results when scaled to different sizes (as well as possibly being very inefficient in file size). If appropriate to do so, they should be replaced with images created using vector graphics.
Note: This template is only supposed to be used if the SVG file mixes vector and raster graphics. If the SVG file only contains raster graphics {{FakeSVG}} is supposed to be used. See also {{TopoSVG}}.

This image is not a real SVG file and is just a wrapper containing one or more raster graphics without vector coding.
Using SVG as just a wrapper is undesirable.
Note: This template should be used if the SVG file contains only raster graphics. If the SVG file contains both vector and raster graphics, then use {{BadSVG}}.

{{BrokenSVG}}

This SVG file renders incorrectly, or not at all. There may be an error in the file's code or structure that affects its display. However, the file could still contain valuable data that might be recovered or corrected by someone with expertise in vector graphics.

{{TracedSVG}}

All the SVG (Scalable Vector Graphics) in this page appear to have been inadequately vectorized, for example, by auto-tracing, and may require revectorization to meet quality standards.
Automatic tracing of complex images can produce overly-large files, inaccurate outlines, and often miss out smaller details completely. Please consider editing this image by hand in a vector editor to improve it. For further information please see our picture tutorial and SVG help. For assistance, refer to the Graphics Lab.

Deutsch ∙ English ∙ español ∙ français ∙ italiano ∙ sicilianu ∙ slovenščina ∙ svenska ∙ македонски ∙ português do Brasil ∙ русский ∙ 日本語 ∙ 한국어 ∙ 中文 ∙ 中文（简体） ∙ 中文（繁體） ∙ +/−

{{Path text SVG}}

The file size of this SVG image may be abnormally large because most or all of its text has been converted to paths rather than using the more conventional <text> element. Unless rendering the text of the SVG file produces an image with text that is incurably unreadable due to technical limitations, it is highly recommended to change the paths back to text. Doing so will ease the process of localizing this image to other languages and is likely to reduce the file size in a significant scale. Other SVGs containing path-based text can be found at Category:Path text SVG. For more information, see SVG: Fonts and Preparing images for upload: Text.

беларуская (тарашкевіца) ∙ Deutsch ∙ English ∙ español ∙ magyar ∙ italiano ∙ 日本語 ∙ македонски ∙ русский ∙ slovenščina ∙ svenska ∙ ไทย ∙ Tiếng Việt ∙ 中文 ∙ 中文（中国大陆） ∙ 中文（简体） ∙ 中文（繁體） ∙ 中文（香港） ∙ 中文（新加坡） ∙ 中文（臺灣） ∙ +/−

{{Superseded|Example.svg}}

This file has been superseded by Example.svg. It is recommended to use the other file. Please note that deleting superseded images requires consent.

{{Technically replaced|SMW Logo.SVG}}

Sorry, this SVG file is solely a source for re-utilization, editing or printing purposes. Please do not use this graphic within Wikipedia articles! MediaWiki isn't able to render this image correctly. Some details may be missing or look wrong. When you include the image in a Wikipedia or any other Wikimedia project site's page, you may want to use the other file, until the support increases.

Help:SVG/nl

File:SMW Logo.SVG

Deutsch ∙ English ∙ español ∙ italiano ∙ 日本語 ∙ 한국어 ∙ македонски ∙ português do Brasil ∙ русский ∙ sicilianu ∙ slovenščina ∙ 简体中文 ∙ 繁體中文 ∙ +/−

{{Template image}}

This SVG file is a generic template for creating new images. It contains embedded placeholder text using specific fonts that may not be available on Wikimedia Commons. This file is not intended to be embedded in a wiki page. Do not reupload this file with text converted to paths, even if the text appears unsightly in an image preview.

How to derive an image from this template
To create an image using this template: Download this SVG. Open the SVG in an SVG editor and change the wording and numbering. Convert all text to a path and save as a basic or plain SVG. Upload the new SVG to Wikimedia Commons.

SVG-bestanden in MediaWiki

Hoe SVG-bestanden werken in MediaWiki

Wanneer u uw SVG uploadt naar Commons (of een andere MediaWiki-wiki), produceert de software automatisch PNG miniaturen, ingebed in de artikelen en de beschrijvingspagina. Als u de afbeelding downloadt (meestal door met de rechtermuisknop op de afbeelding te klikken), krijgt u de PNG-afbeelding. Als u het SVG-bestand wilt, moet u de link naar de afbeelding opslaan in plaats van de afbeelding zelf. Dit werkt (door met de rechtermuisknop op de link onder de afbeelding te klikken) alleen op de beschrijvingspagina van de afbeelding, niet op de miniatuur in de categoriepagina.

MediaWiki gebruikt librsvg om SVG-bestanden te converteren naar PNG-bestanden voor weergave (SVG-rendering), het heeft een aantal lange en bekende bugs die moeten worden opgelost, dus misschien wilt u uw bestand met dat programma controleren voordat u het uploadt. U kunt de SVG testen met SVG Check voor een nauwkeurig PNG-voorbeeld en W3 XML-validator voor mogelijke codefouten of incompatibiliteit van SVG-elementen of -attributen.

Meer informatie: MediaWiki SVG beperkingen.

SVG-bestanden schalen via MediaWiki

Wat dit betekent: Stel dat u een grote versie van uw SVG wilt maken voor gedetailleerde kaarten, of met behulp van in-bitmap-software zoals gimp, of kalligrafie die één teken per pagina afdrukt of iets dergelijks. U moet MediaWiki dwingen om een enorme PNG-miniatuur te maken, door https://commons.wikimedia.org/w/thumb.php?f=Foo.svg&w=1000 te gebruiken of door iets te doen zoals [[File:Foo.svg|1000px]] in de zandbak of uw overlegpagina. Het afdrukken van deze gigantische PNG ziet er veel beter uit dan wanneer u een van de standaardminiaturen probeert op te schalen! Natuurlijk kunt u ook SVG-software zoals Inkscape gebruiken voor het afdrukken, maar soms laat dat iets anders zien dan wat er op het scherm wordt weergegeven (zwarte achtergrond, andere lettertypen, enz.).

Veelgestelde vragen

Wat zijn redelijke afmetingen om te kiezen voor mijn SVG-afbeeldingen?: De absolute grootte van het document maakt niet veel uit, omdat dat alleen van invloed is op hoe het wordt weergegeven wanneer het op zichzelf wordt bekeken. De bestandsgrootte is niet afhankelijk van de afmetingen van het document. De afbeelding kan zo veel worden uitgerekt of gecomprimeerd als een gebruiker wil, zonder de kwaliteit of bestandsgrootte te wijzigen. Met dat in gedachten is de aanbevolen afbeeldingshoogte ongeveer 400-600 pixels. Wanneer een gebruiker de afbeelding op volledige grootte bekijkt, geeft een breedte van 600-800 pixels hem een goede close-upweergave, terwijl hij nog steeds de hele afbeelding op zijn scherm kan plaatsen zonder in of uit te hoeven zoomen: terwijl 9 × 9 pixels te klein is, is 3000 × 2000 te groot. De lengte van de kortere zijde van de PNG die door librsvg op Wikimedia wordt weergegeven, is beperkt tot 4096 px (d.w.z. als de breedte korter is dan de hoogte, wordt de lengtelimiet van 4096 px toegepast op de breedte en wordt de hoogte dienovereenkomstig geschaald, of vice versa), dus het heeft geen zin om een SVG-afbeelding te uploaden die zoveel resolutie nodig heeft om leesbaar te zijn wanneer een deel van de tekst te klein is na het verkleinen naar voorbeeldgrootte. Het kleinste lettertype in een SVG-afbeelding moet leesbaar zijn in een breedte van ten minste 2000 px, de hoogste aanbevolen weergaveresolutie op de afbeeldingsbeschrijvingspagina. Anders moet er naast de SVG-bron een rasterversie worden opgegeven.
Hoe kan ik op mijn computer een SVG-bestand omzetten in rasterformaat?: Voor SVG-bestanden die zich niet goed gedragen in grafische software zoals Inkscape, kunt u eenvoudig de SVG uploaden naar Wikimedia en vervolgens de link opslaan die PNG-weergave in andere breedtes biedt op de bestandsbeschrijvingspagina. U kunt de number-px in de link aanpassen om de gewenste breedte van de PNG-weergave te genereren. Voor afbeeldingen met een zijde die groter is dan 4096 px, kunt u alle conversietools gebruiken, zoals RSVG-Convert, met als enige verschil het ontbreken van anti-aliasing. Als u wilt dat de rasterafbeelding er vloeiender uitziet, kunt u de SVG converteren naar PDF in RSVG-Convert en vervolgens de PDF converteren naar raster versie in Photoshop (Inkscape vertoont nog steeds een lettertypeprobleem bij het openen van PDF). Een andere optie zonder het uploaden van de SVG-bron naar Wikimedia (vanwege een niet-vrije licentie) is om het SVG-voorbeeld op Wikimedia Toolforge die niet de maximale zijkap heeft, hoewel bepaalde weergaveresultaten, zoals het lettertype, enigszins kunnen afwijken.
Waarom wordt mijn afbeelding niet opgebouwd?: Dit kan verschillende redenen hebben. Meestal is het te wijten aan een verwijzing naar een extern bestand, misschien een overblijfsel van het traceren van een bitmap. (De opbouw van de afbeelding stopt als de website dit andere bestand probeert te vinden) Om dit probleem op te lossen, moet u er in uw editor voor zorgen dat u alle verwijzingen naar andere bestanden verwijdert voordat u de definitieve versie opslaat. Als het nodig is om bitmaps te gebruiken, kunt u in Inkscape de functie gebruiken om alle afbeeldingen in te sluiten (menu Effecten → Afbeeldingen → Alle afbeeldingen invoegen). Het is ook mogelijk dat u speciale effecten gebruikt, zoals vervaging. Helaas wordt het nu niet goed ondersteund door librsvg. Zie ook § Gewone SVG, gecomprimeerde SVG, algemene specificaties hiervoor.
Waar kan ik meer hulp krijgen met SVG-afbeeldingen?: Probeer Commons:Graphic Lab als u een probleem heeft met een individuele afbeelding. Commons:Graphics village pump kan nuttig zijn voor SVG-discussies (en ook voor afbeeldingen in het algemeen). Vaak zijn er SVG-keien op die pagina's in de buurt en zijn ze meer dan bereid om te helpen.
Hoe verander ik de documentgrootte in Inkscape?: Het documentformaat begint met een A4-pagina. Om dit groter of kleiner te maken, maakt u een rechthoek met de gewenste afmetingen van het document en selecteert u deze met de pijlen. Selecteer vervolgens Bestand → Document eigenschappen en kies onder Aangepast formaat Pagina naar selectie schalen en klik op OK. U kunt nu de rechthoek voor de grootte verwijderen en de andere elementen verplaatsen of vergroten of verkleinen zodat ze passen in de ruimte die u heeft gemaakt.
Mijn tekst verschijnt als kleine blokjes, of wordt helemaal niet weergegeven na het uploaden naar Commons!: Als u "Ingekaderde tekst (Flowed Text)" in Inkscape gebruikt, wordt deze helemaal niet weergegeven. Doorlopende tekstvakken worden gemaakt wanneer u klikt en sleept om uw tekstvak te maken. Om dit te voorkomen, klikt u één keer om uw cursor te positioneren en typt u vervolgens uw tekst. Om een doorlopend tekstvak om te zetten in een normaal tekstvak, gaat u naar het menu "Tekst" en kiest u "Omzetten naar tekst".; Als dit nog steeds niet werkt, worden sommige tekstfuncties van Inkscape niet ondersteund door MediaWiki's renderer, zoals 'text-on-path'. Als u geen doorlopende tekst gebruikt en nog steeds een probleem ondervindt, converteert u de tekst naar paden. Dit doet u door het commando Pad → Object naar Pad te selecteren. Hiermee wordt de tekst omgezet in paden. Sla het bestand op als gewone SVG en upload het bestand opnieuw.
Mijn pijlpunten/stippellijnen verschijnen als kleine blokjes, of verschijnen helemaal niet na het uploaden naar Commons!: Controleer of het attribuut style="overflow:visible" zich in de tag-markering bevindt en niet in het tag-pad. Sommige lijnfuncties van Inkscape worden niet ondersteund door MediaWiki's renderer. Selecteer de problematische objecten en selecteer het commando Pad → Lijn naar pad. Hiermee worden de lijnen omgezet in paden. Sla het bestand op als gewone SVG en upload het bestand opnieuw.
Hoe verwijder ik de transparante achtergrond?: Heeft u dat echt nodig? Meestal niet! MediaWiki's renderer zal het SVG-bestand converteren naar PNG met een transparante witte achtergrond voor weergave (wordt wit weergegeven als uw browser geen PNG-transparant ondersteunt). Browsers die standaard SVG-transparantie ondersteunen, tonen de achtergrondkleur door de afbeelding heen, wit! (of grijs als de afbeelding als miniatuur wordt weergegeven). Door uw afbeelding transparant achter te laten, helpt u toekomstige editors en kan de afbeelding over andere achtergrondkleuren worden weergegeven zonder een groot wit vierkant. Als uw afbeelding echter echt een specifieke gekleurde achtergrond nodig heeft, maak dan een rechthoek ter grootte van de afbeelding, vul deze met de achtergrondkleur van uw keuze en kies het commando Object → Onderaan. Sla de afbeelding op en geniet van de effen achtergrondkleur!^[51]
Bij het opbouwen van de uitvoer worden mijn lettertypen niet goed gebruikt. Welke lettertypen worden ondersteund?: Een lijst.
Ik gebruik dezelfde lettertypen die in Wikimedia zijn geïnstalleerd, maar de tekstpositionering in mijn SVG-afbeelding ziet er nog steeds anders uit in mijn lokale weergave en die in Wikimedia.: Het hangt af van welke renderingbibliotheek en versie uw lokale renderer gebruikt. Het is bekend dat tekstpositionering en andere SVG-aspecten (zoals 'transformeren') zich anders gedragen in verschillende renderingbibliotheken. Voor het resultaat dat het dichtst in de buurt komt van Wikimedia render, moet u de renderer gebruiken die librsvg gebruikt. Opera, Chrome en Safari geven nauwkeurige resultaten. Firefox en Internet Explorer 10 zijn enigszins onnauwkeurig. Safari ziet er netter uit wanneer bepaalde lettertype-doorloopbaar (vloeiend) is ingeschakeld.
Ik ben een vlag (of een ander insigne) aan het tekenen en er wordt gevraagd om PANTONE of CMYK kleuren. Wat moet ik doen?: Ten eerste, als u de woorden *PANTONE of CMYK ziet, probeer dan te zien of ze iets hebben dat RGB wordt genoemd. Afbeeldingen van Wikimedia Commons worden veel gebruikt op Wikimedia-projecten zoals Wikipedia, enz., en zijn ontworpen voor gebruik op computerschermen. Als u RGB-kleuren kunt vinden, gebruik ze dan ten gunste van anderen. Als u dat niet kunt, kunt u de kleuren converteren met behulp van de eigen kleurkiezer van uw programma, of, in het geval van PANTONE, Color Finder,[2]^{[needs update]} waaruit u RGB-waarden voor een kleurcode kunt extraheren. Zorg ervoor dat u aangeeft (misschien op de overlegpagina of in de samenvatting van de afbeelding) welke conversiemethode u heeft gebruikt, zoals "[Een of ander programma] is gebruikt om CMYK-waarden te converteren [...] naar RGB [...]".

Software

Veel programma's kunnen overweg met SVG-bestanden. Misschien wilt u er een hieronder proberen, dit zijn niet de enige programma's voor dit doel.

Omdat SVG slechts een XML-specificatie is, is het mogelijk om SVG-bestanden handmatig te schrijven in een teksteditor of met uw eigen programma's/scripts.^[52] In feite worden veel SVG-afbeeldingen geschreven in teksteditors. Een editor die de syntaxis kan markeren is handig. Controleer uw werk met de W3C SVG-validator.

Viewers

Alle moderne webbrowsers geven SVG native weer.

librsvg, een renderingbibliotheek die wordt gebruikt door MediaWiki en de volgende viewers:
- RSVG-view voor UNIX, een kleine, eenvoudige viewer om te zien hoe SVG-bestanden eruit zullen zien wanneer ze worden weergegeven door MediaWiki
- RSVG-view voor Windows (zoals hierboven)
- Commons:Commons SVG Checker, een andere op librsvg gebaseerde render bedoeld om problemen in SVG-bestanden te vinden en te rapporteren
Svg-explorer, een gratis GPL extensie voor Windows Verkenner die miniaturen genereert voor SVG-bestanden
iShell, een gratis MIT gelicentieerd extensie voor Windows Verkenner die miniaturen genereert voor SVG-bestanden
SvgShellExtensions.dll, een gratis Boost-licentie extensie voor Windows Explorer die miniaturen genereert voor SVG-bestanden, gebaseerd op Image32 grafische bibliotheek van dezelfde auteur
SVG Shell Extensions, een vrije extensie met een Apache licentie voor Windows Explorer die miniaturen genereert voor SVG-bestanden, gebaseerd op dezelfde bibliotheek hierboven, en een eenvoudige SVG-editor bevat die wordt gebruikt om SVG vanuit de broncode te bekijken
resvg, is een van de snelste en meest correcte SVG-render ^[53], biedt ook extra packages aan voor viewer, optimizer (beperkte ondersteuning) en extensie voor Windows Verkenner
Inkview, deel van Inkscape vector grafische editor, ondersteunt ook Inkscape-specifieke functies, die niet in de SVG-1.1-DTD-Standard zijn
IrfanView, een afbeeldingsviewer biedt een plug-in voor svg-rendering
Imagine, een andere afbeeldingsviewer biedt een plug-in voor svg-rendering
batik, een Java-gebaseerde toolkit voor svg-rendering
svgexport, een Node.js-module
cairosvg, een Python-bibliotheek
ImageMagick, afbeeldingsconverter
chrome-svgrender, rendert SVG-bestanden met Headless Chrome
SVG.NET, een basis renderer
QtSVG, een basis renderer
wxsvg, een basis renderer

Converters

De meeste SVG-editors bevatten een raster-naar-vector-converter (image tracing)

toolforge:convert, een PDF-naar-SVG en SVG-naar-PNG converter
Autotrace (WAARSCHUWING: ten minste één van de links daar is toegeëigend door een phishing-site), een bibliotheek die in 2004 is ontwikkeld door Martin Weber en die de volgende hulpmiddelen gebruikt:
- ImageMagick
- autotracer.org, een online tracer die JPEG, GIF en PNG-bestanden accepteert en SVG, PDF, EPS, AI en DXF maakt
- Delineate, een gratis op Java gebaseerde interface voor Autotrace en Potrace (link). Potrace is ook geïntegreerd in Inkspace in het menu Pad >Bitmap overtrekken.
Scribus (met GhostScript), een EPS-naar-SVG-converter
PDFTron PDF2SVG, commerciële PDF-naar-SVG-converter voor Windows
Barton PDF2SVG, een PDF-naar-SVG-converter voor Linux, die twee gratis bibliotheken genaamd "Poppler" en "Cairo" gebruikt
librsvg, een renderingbibliotheek die wordt gebruikt door MediaWiki en de volgende converters:
- RSVG-Convert, en open source hulpmiddel dat SVG omzet in PNG, PDF of PS
Bitmap naar SVG converter - nuttig voor het omzetten van pixel kunst
Vectorizer.AI, een op kunstmatige intelligentie gebaseerde online tracer om rasterafbeeldingen te converteren
PDF24 Tools, inclusief een online PDF-naar-SVG-converter

Editors

Inkscape, een gratis en open-source SVG-editor voor Windows, macOS en Linux. Zie details.
Sodipodi, een niet meer ondersteunde gratis en open-source SVG-editor voor Windows en Linux
OpenOffice.org Draw, een gratis en open-source tekenprogramma dat naar SVG nativ kan exporteren en SVG leest met SVG-plug-in.
LibreOffice Draw, afgeleide van OpenOffice Draw, kan importeren en exporteren naar SVG. Mogelijk geschikter dan Inkscape voor speciale gevallen zoals stroomschema's.
Dia, een gratis en open-source diagram-app voor Windows, macOS en Unix-achtig (heeft enkele bugs in SVG-export)
Adobe Illustrator, een commerciële (en zeer dure) vectory graphics editor met rijke grafische functies maar beperkte SVG-specifieke mogelijkheden. Zie Help:Illustrator voor meer informatie.
Affinity Designer
CorelDraw
SVG-edit (op GitHub), een gratis en open-source Web app
- toolforge:svgedit, een oude kopie van SVG-edit op Wikimedia Toolforge. Zie User talk:Rillke/SVGedit.js § Is er een WYSIWYG-editor voor details.
SVGedit.js, een experimentele gadget afkomstig van Wikimedia Commons
Vector Paint - Een eenvoudige online editor die handig is voor bijsnijden. Opmerking: bijsnijden werkt niet goed met bepaalde bestanden.

Gespecialiseerde applicaties

Ipe, een gratis en open-source editor met een SVG-converter, met goede LaTeX-integratie voor wiskundige en technische diagrammen
Scour. Voor het opruimen/maken van een kleinere bestandsgrootte (in Python, ook opgenomen in Inkscape).
Graphviz. Een open source applicatie voor het automatisch opmaken van diagrammen.
BKchem. Een gratis software om chemische structuren te tekenen in SVG. Draait op Windows-, Mac OS X- en Unix-systemen.
Freemind is een gratis en open source mindmapping-applicatie geschreven in Java. FreeMind.
GeoGebra is een gratis en open source multi-platform wiskundesoftware met de mogelijkheid om SVG te exporteren. Geogebra.
LibreOffice Calc (libreoffice.org), voor het maken van staafdiagrammen, cirkeldiagrammen, enz.
Gnumeric spreadsheet, bewaart/exporteert grafieken in SVG-formaat, zie gnumeric.
Nano door Vecta.io - verkleint de bestandsgrootte
SVGO - verkleint de bestandsgrootte
- SVGOMG - een webgebaseerd frontend voor SVGO
- SVGOMFG - een webgebaseerde front-end voor SVGO
SvgPathEditor. Een online editor die nuttig is voor het analyseren en verbeteren van SVG-padgegevens.
SVG Path Visualizer. Voor het analyseren van SVG-padgegevens.

Copyright

Er is enige bezorgdheid dat de SVG-broncode van afbeeldingen auteursrechtelijk beschermd kan zijn als een "computerprogramma", zelfs als de uitvoer een afbeelding in het publieke domein is omdat het onder de drempel van originaliteit of anderszins niet te onderscheiden van een werk dat publiek domein is vanwege het verlopen van auteursrechten. Dit zou kunnen betekenen dat, hoewel de uitvoer van een SVG, de afbeelding, zich in het publieke domein bevindt, de code restrictief auteursrechtelijk beschermd zou kunnen zijn en daarom ongeschikt zou kunnen zijn om op te nemen in Wikimedia Commons.

Elementen die in het voordeel van SVG-broncode wegen die voldoende creatieve expressie bevat om auteursrechtelijk beschermd te zijn, zijn onder meer handgeschreven code, complexe ingesloten CSS, ingesloten opmerkingen langer dan korte zinnen of een grote, zorgvuldig geselecteerde reeks controlepunten. Elementen die in het voordeel van een gebrek aan creativiteit in SVG-broncode wegen, zijn onder meer programmatisch gegenereerde code of slaafs kopiëren van een bron uit het publieke domein. Zie het volgende voor meer context:

Voorbeelden van verwijderingsverzoeken op Commons:Deletion requests/File:Bethlehem Steel logo.svg en Commons:Deletion requests/File:W3C Semantic Web Logo.svg.
Discussie: is SVG software
Use-cases: Adobe Systems, Inc. tegen Southern Software, Inc., Alfred Bell & Co. tegen Catalda Fine Arts, Inc.. (arrest, commentaar) en Meshworks v. Toyota (arrest, commentaar)

Zie ook

Onderhoud:

Categorie SVG
Categorie SVG maps — De SVG branch van het project map.
Categorie Afbeeldingen die vectorgrafieken zouden moeten gebruiken
Categorie Afbeeldingen met een fout in librsvg
Naar SVG omzetten

Referenties

↑ Als een style element niet zijn type attribuut specificeert, dan wordt het type hehaald uit het svg element contentStyleType attribuut (wat de SVG DTD standaard zet op "text/css"). http://www.w3.org/TR/SVG11/styling.html#StyleElement
↑ http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
↑ SVG-broncodebewerkingen zonder visuele wijziging
↑ W3C – geldige DTD-lijst – Optionele doctype-declaraties
↑ Voeg geen DOCTYPE-declaratie toe, W3C – Het wordt niet aanbevolen om een DOCTYPE-declaratie op te nemen in SVG-documenten.
↑ W3C – Er is geen (normative external) DTD voor SVG 2.0
↑ Validator API, https://validator.w3.org/docs/api.html
↑ W3C: XML-declaratie
↑ W3C: SVG – Prolog- en documenttypeverklaring
↑ W3C: XML charencoding
↑ http://www.w3.org/TR/SVG/struct.html#NewDocumentOverview
↑ W3C: SVG linking
↑ W3C: SVG viewBox
↑ Philip Rogers (2015-04-30). Intent to deprecate: SMIL. Google Groups. Retrieved on 2015-06-27.
↑ https://caniuse.com/#feat=svg-smil
↑ https://github.com/svg/svgo/issues/1055
↑ https://github.com/RazrFalcon/svgcleaner/issues/213#issuecomment-589801095
↑ https://github.com/scour-project/scour/commits/master
↑ User:JoKalliauer/Optimization#SVG sourcecode edits without visual change
↑ User:JoKalliauer/Optimization#Useless elements that should be kept
↑ https://github.com/scour-project/scour/wiki/Documentation#--renderer-workaround-and---no-renderer-workaround
↑ Inkscape veelgestelde vragen: Hoe zit het met het wrappen van tekst?
↑ U kunt de kleur van het onzichtbare pad wijzigen, dat wordt gebruikt als de grens van de flowRoot, vergelijkbaar met FlowRoot and flowRegion.svg, of u kunt ook de meer algemene path-tag gebruiken en andere vormen maken.
↑ User:JoKalliauer/RepairFlowRoot#replace notempty flow-text using (Inkscape)
↑ in sommige gevallen translate=".."-attributes of in sommige gevallen waarin text-align=".."-attributes worden gebruikt
↑ Zie bijvoorbeeld: File:Petit Monde de Gondry, Jonze & Kaufman.svg
↑ Die ook gedownload kan worden van Github
↑ User:JoKalliauer/RepairFlowRoot#delete empty flow-text using (Text-Editor)
↑ Category:Images with SVG 1.2 features
↑ User:JoKalliauer/RepairFlowRoot#That the black square won't get rendered (Text-Editor)
↑ Attribuut viewBox in SVG element heeft voorrang bij het definiëren van de interne resolutie als deze afwijkt van width en height attributen.
↑ Lettertype-spatiëring: Hulp bij bestand op Grafiek Kroeg, vergelijk ook File:Fonttest-Kerning.svg.
↑ textLength attribuut in w3.org
↑ http://www.w3.org/TR/SVG/fonts.html#FontFaceElementFontFamilyAttribute
↑ www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#generic-font-families
↑ ^a ^b User:AntiCompositeNumber on phab:T180923#6557063
↑ W3C: SVG - Het 'tspan' element
↑ W3C: SVG – Witruimtebehandeling
↑ W3C: SVG 2 - De 'xml:lang' en 'xml:space' attributen
↑ librsvg behoudt nog steeds dit extra spatieteken, maar tijdens de middelste of eindtekstuitlijning wordt dit spatieteken genegeerd.
↑ https://bugs.launchpad.net/inkscape/+bug/168023
↑ [$w org W3C: SVG – Het 'textPath' element]
↑ Vermijd het 'stijl'-attribuut waar mogelijk
↑ Chapter 11: Painting: Filling, Stroking and Marker Symbols. W3C (2012-08-12). Retrieved on 2012-11-28.
↑ paint-order. Mozilla Developer Network (2013-01-12). Retrieved on 2013-10-21.
↑ Een eenvoudige truc voor het optimaliseren van SVG-bestanden met WebpageFX
↑ 35-optimizing-svg-tools by CSS-Tricks
↑ css-tricks: understanding-and-manually-improving-svg-optimization
↑ Inkscape tutorial: Tracing
↑ Inkscape wiki: Hulpmiddelen: Naar Vector converteren/overtrekken
↑ Een feature bug rapport hiervoor bestaat sinds January 2005 op Inkscape launchpad.)
↑ Afbeelding gemaakt met C++-code door Claudio Rocchini
↑ SVG test suites

Externe links

SVG Primer
openclipart.org biedt meer dan 10.000 SVG-afbeeldingen (publiek domein)
CanIUse.com
SVG: Scalable Vector Graphics biedt SVG-gerelateerde documentatie en tutorials

[1] Als een style element niet zijn type attribuut specificeert, dan wordt het type hehaald uit het svg element contentStyleType attribuut (wat de SVG DTD standaard zet op "text/css"). http://www.w3.org/TR/SVG11/styling.html#StyleElement

[2] ttp://www.iana.org/assignments/language-subtag-registry/language-subtag-registry

[3] SVG-broncodebewerkingen zonder visuele wijziging

[4] W3C – geldige DTD-lijst – Optionele doctype-declaraties

[noDTD-5] Voeg geen DOCTYPE-declaratie toe, W3C – Het wordt niet aanbevolen om een DOCTYPE-declaratie op te nemen in SVG-documenten.

[6] W3C – Er is geen (normative external) DTD voor SVG 2.0

[7] Validator API, https://validator.w3.org/docs/api.html

[8] W3C: XML-declaratie

[9] W3C: SVG – Prolog- en documenttypeverklaring

[10] W3C: XML charencoding

[11] ttp://www.w3.org/TR/SVG/struct.html#NewDocumentOverview

[12] W3C: SVG linking

[13] W3C: SVG viewBox

[14] Philip Rogers (2015-04-30). Intent to deprecate: SMIL. Google Groups. Retrieved on 2015-06-27.

[15] ttps://caniuse.com/#feat=svg-smil

[16] ttps://github.com/svg/svgo/issues/1055

[17] ttps://github.com/RazrFalcon/svgcleaner/issues/213#issuecomment-589801095

[18] ttps://github.com/scour-project/scour/commits/master

[19] User:JoKalliauer/Optimization#SVG sourcecode edits without visual change

[20] User:JoKalliauer/Optimization#Useless elements that should be kept

[21] ttps://github.com/scour-project/scour/wiki/Documentation#--renderer-workaround-and---no-renderer-workaround

[22] Inkscape veelgestelde vragen: Hoe zit het met het wrappen van tekst?

[File:FlowRoot_and_flowRegion.svg-23] U kunt de kleur van het onzichtbare pad wijzigen, dat wordt gebruikt als de grens van de flowRoot, vergelijkbaar met FlowRoot and flowRegion.svg, of u kunt ook de meer algemene path-tag gebruiken en andere vormen maken.

[User:JoKalliauer/RepairFlowRoot#replace_notempty_flow-text_using_(Inkscape)-24] User:JoKalliauer/RepairFlowRoot#replace notempty flow-text using (Inkscape)

[25] sommige gevallen translate=".."-attributes of in sommige gevallen waarin text-align=".."-attributes worden gebruikt

[26] Zie bijvoorbeeld: File:Petit Monde de Gondry, Jonze & Kaufman.svg

[svg2validsvg-27] Die ook gedownload kan worden van Github

[User:JoKalliauer/RepairFlowRoot#delete_empty_flow-text_using_(Text-Editor)-28] User:JoKalliauer/RepairFlowRoot#delete empty flow-text using (Text-Editor)

[Category:Images_with_SVG_1.2_features-29] Category:Images with SVG 1.2 features

[User:JoKalliauer/RepairFlowRoot#That_the_black_square_won't_get_rendered_(Text-Editor)-30] User:JoKalliauer/RepairFlowRoot#That the black square won't get rendered (Text-Editor)

[31] Attribuut viewBox in SVG element heeft voorrang bij het definiëren van de interne resolutie als deze afwijkt van width en height attributen.

[32] Lettertype-spatiëring: Hulp bij bestand op Grafiek Kroeg, vergelijk ook File:Fonttest-Kerning.svg.

[33] textLength attribuut in w3.org

[34] ttp://www.w3.org/TR/SVG/fonts.html#FontFaceElementFontFamilyAttribute

[35] www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#generic-font-families

[T180923-36] User:AntiCompositeNumber on phab:T180923#6557063

[37] W3C: SVG - Het 'tspan' element

[38] W3C: SVG – Witruimtebehandeling

[39] W3C: SVG 2 - De 'xml:lang' en 'xml:space' attributen

[40] rsvg behoudt nog steeds dit extra spatieteken, maar tijdens de middelste of eindtekstuitlijning wordt dit spatieteken genegeerd.

[41] ttps://bugs.launchpad.net/inkscape/+bug/168023

[42] [$w org W3C: SVG – Het 'textPath' element]

[43] Vermijd het 'stijl'-attribuut waar mogelijk

[44] Chapter 11: Painting: Filling, Stroking and Marker Symbols. W3C (2012-08-12). Retrieved on 2012-11-28.

[45] t-order. Mozilla Developer Network (2013-01-12). Retrieved on 2013-10-21.

[46] Een eenvoudige truc voor het optimaliseren van SVG-bestanden met WebpageFX

[47] 35-optimizing-svg-tools by CSS-Tricks

[48] ss-tricks: understanding-and-manually-improving-svg-optimization

[49] Inkscape tutorial: Tracing

[50] Inkscape wiki: Hulpmiddelen: Naar Vector converteren/overtrekken

[51] Een feature bug rapport hiervoor bestaat sinds January 2005 op Inkscape launchpad.)

[52] Afbeelding gemaakt met C++-code door Claudio Rocchini

[53] SVG test suites

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

[23]

[24]

[25]

[26]

[27]

[28]

[29]

[30]

[31]

[32]

[33]

[34]

[35]

[36]

[37]

[38]

[39]

[40]

[41]

[42]

[43]

[44]

[45]

[46]

[47]

[48]

[49]

[50]

[51]

[52]

[53]

Help:SVG/nl

Wat is SVG?

librsvg

Eigenaardigheden

Stylesheet

niet weergegeven tekst / Flow-elementen

systemLanguage verwerking

Grootte attributen

SVG-afbeeldingen maken voor Wikimedia Commons

Voordat u uploadt: validatie en controle van het uiterlijk van de afbeelding

Validatie

Uiterlijk afbeelding

Document declaratie

Bitmaps

Animatie

Title

Geblokkeerde elementen en scripts

Externe bestanden

Opruimen

Gewone SVG, gecomprimeerde SVG, algemene specificaties

Lettertypen, tekst

Niet weergegeven tekst (Flowed Text bug)

Beperkingen voor teksttransformatie

Beperking van de schrijfmodus

Lettertype substitutie en terugval lettertypes

Lay-out met elementen text en tspan

Regelovergang

class opmaak lettertype

Tekst met achtergrondrand

Kleurverlopen

Vervagen

Grootte

De bestandsgrootte verkleinen

Vertalingen

Naar SVG converteren

Opnieuw genereren

Converteren

Een nieuwe maken

Uploaden en categoriseren

Afbeeldingsbeschrijvingpagina's

SVG-bestanden categoriseren

De SVG categorie-boom

Naamconventies voor categorieën

SVG-bestanden taggen

SVG software tags

SVG file tags

SVG conversion tags

SVG-bestanden in MediaWiki

Hoe SVG-bestanden werken in MediaWiki

SVG-bestanden schalen via MediaWiki

Veelgestelde vragen

Software

Viewers

Converters

Editors

Gespecialiseerde applicaties

Copyright

Zie ook

Referenties

Externe links

Navigation menu

Search

`systemLanguage` verwerking