Help:SVG/nl

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search
This page is a translated version of a page Help:SVG and the translation is 36% 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.
Other languages:

Shortcut: COM:SVG

Officieel logo voor het SVG bestandstype

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?

Een voorbeeld van een SVG-afbeelding - op dat op welke schaal u het beeld ook bekijkt, de bochten lijken altijd glad, nooit "gekarteld"

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

Private-use langtag qcs om zh-Hans te selecteren.
Private-use langtag qct om zh-Hant te selecteren.

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.

SVG-afbeeldingen maken voor Wikimedia Commons

Programma's die u kunt gebruiken om SVG-afbeeldingen te maken, worden weergegeven in de § Redacteuren 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]

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. W3C: XML-declaratie De XML-verwerkingsinstructie specificeert de versie van XML en de tekenset. W3C: SVG – Prolog- en documenttypeverklaring Het W3C dringt erop aan dat character encoding declaratie zou moeten? worden gebruikt,W3C: XML charencoding (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";[8] 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 [9] 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[10]. 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). 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 informatievere 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. [11] Vanaf juli 2018 is SVG SMIL-animatie beschikbaar in de meeste browsers, behalve Internet Explorer, Edge en Opera.[12]

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)
<!-- scipts -->
<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, [13][14][15] 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 [16]. Ongeldige elementen en attributen zijn vaak nodig voor een correcte weergave, en mogen niet worden verwijderd [17].

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[18].

Lettertypen, tekst

Shortcut

Een aantal vrije lettertypen die op de Wikimedia-server zijn geïnstalleerd, kunnen worden weergegeven met behulp van de tag <text>. U kunt sample renderings 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 redacteurs 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 files which should not convert text to path shape may be tagged with {{Path text SVG}}. For linking text modifiable (what we have been calling "text" or "font") and text non-modifiable (i.e., path-based) versions of an SVG file use {{Vector text versions|…}}.

Demonstration of the basic steps of preserving the text before converting to path in Inkscape so the text can remain selectable (when opened in real-time in browser) and searchable (by search engine like Google).

If you still insist converting text to path for reasons like the lack of support of textPath function or rare glyph which is not present in most typefaces, you should duplicate the raw text group to overlap the converted text and add the attribute fill-opacity="0" stroke-opacity="0" to this group in order to hide the raw text. This way the text in the original SVG file can still be searched, clicked and highlighted by readers manually. opacity="0" may lead to some misunderstanding because it will make the highlight invisible while still selectable. display="none" prevents readers from searching the text without accessing the source code.

Converting text to outline (path) before exporting SVG is particularly popular among Adobe Illustrator users because the vector graphic software does not convert text-align attribute to text-anchor and the fallback fonts on Wikimedia have different font metrics than the chosen font by the image contributor. This leads to incorrect text positioning and encourages users to ignore the benefits of maintaining raw text in the vector file.

<span id="Not_displayed_text_(Flowed_Text_bug)_">

Niet weergegeven tekst (Flowed Text bug)

See also: § Line wrap.

Inkscape supports a feature known as "Flowed Text" which automatically wraps text to fit into the bounds of a given text box. Unfortunately this feature is part of SVG Tiny 1.2, which nobody supports. Its usage will almost certainly result in compatibility problems.[19] On Wikipedia, a flowed text box does not render at all (phab:T43424 - depending on font size and color).

[20]

To avoid this issue in Inkscape:

  • The easiest solution is to only use a single click (without dragging) to create text with Inkscape’s text tool. (In contrast when holding the mouse button and dragging the mouse to draw a text box, you're specifically telling Inkscape to use Flowed Text).

However there are some easy ways to fix this issue:

  • If you already created a Flowed Text box you can convert it to normal text using Text → Convert to Text[21]. (But check the text alignment afterwards, in about 15% of all cases[22] it translate the text or changed the text-alignment.[23])
  • If there is a flow text, which only consist of one line (as in more then 9 out of 10 cases) you can convert it in any texteditor to a simple text (produces exactly the same as inkscape) if you replace the flowRegion with a `<text x=".." y="..">-tag with the x and y coordinates of the rectangle. On User:JoKalliauer/RepairFlowRoot#replace the flow-text by <text> using (Text-Editor) you can find also an automatic string-edit-script[24] that does that for you.

If you accidentally created a Flowed Text box which is empty (i.e. contains no text) it’s not visible or selectable in Inkscape but it still shows up as a black rectangle on Wikipedia. To delete it there are some possibilities:

  • Use Inkscape’s built in XML editor (Edit → XML Editor) and delete all Flowed Text boxes (search for all nodes which are called <svg:flowRoot id="flowRootXXXX"> in the tree view).
  • Use a simple text editor (e.g. Notepad) and search for the text "flowRoot". Delete all Flowed Text boxes manually by removing their opening XML tag (<flowRoot ...>), their closing XML tag (</flowRoot>), and all text between two matching tags.[25]
  • To just hide the unvisible rectangle you can add ` fill-opacity="0"`[26][27] to the <rect … fill-opacity="0"/>-tag (or in <path d="…" fill-opacity="0">-tag).

Beperkingen voor teksttransformatie

Comparison of SVG raw text rendering and text converted to path

Font scaling currently does not work as expected if horizontal and vertical scales (according to the effective transform matrix) are not equal (the horizontal stretch will be ignored: only the font height, computed from the matrix is currently honored); this can prevent the correct rendering in narrow/condensed or width-extended styles from another font, with text taking unexpected width and flowing out of the expected box (the alternative is to select an alternate free font family which is already narrowed/condensed).

Text is guaranteed to be misplaced (and in some case, ugly kerning) if the resolution of the PNG render is not the same as the native dimension defined by the SVG file itself regardless of how "regular" the scaling multiplier is (e.g. 0.5, 2 or 4) (phab:T36947).[28] In any case, do not use extremely small (>10px) or large font-size and then scale the text or the whole image to your desirable size. Always begin with a reasonable font-size (unfortunately a size around 80px is preferable).[29]

Beware also with font metrics differences: an SVG file may look good when rendered directly in a SVG-capable (all modern) browser under Windows or Mac OS (which can use common, but non free fonts such as Courier or Courier New), but will look other when restricted to the list of free fonts currently supported by the MediaWiki’s SVG-to-PNG renderer (or when viewed under OSes like free distributions of Linux), see also section "Font substitution and fallback fonts".

The attribute textLength isn't fully supported and could not rendered correctly. See phab:T15387.[30]

Beperking van de schrijfmodus

The top-to-bottom writing mode test cases that show it works with some but not all Chinese fonts.

RSVG recognizes writing-mode property, but there are problems with some fonts on Commons (especially the default font). That some fonts work suggests that the problem lies with the font rather than RSVG. The problem is the vertical spacing causes the characters to overwrite each other (phab:T65236). For example, the typical way of producing vertical text does not work: 

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

The workaround is to specify a font that works rather than relying on the default Chinese font (which is probably WenQuanYi Zen Hei). Suitable fonts are Noto Sans CJK SC or AR PL UKai TW or monospace.


Lettertype substitutie en terugval lettertypes

How the fallback-fonts are rendered.

SVG font specifications may use a specific font family such as Arial or Times New Roman. Such a font specification usually means the user agent must have access to the font file with that name. Unfortunately, many fonts are proprietary and are not available on all operating systems. For example, not all operating systems have the proprietary Arial font. If the specific font family is not available, then some default font will be used; the default font may have a much different appearance. For the user agent librsvg, the default font is Liberation Serif.

Many user agents have a font substitution table that allows the user agent to substitute a font family that is close. To improve the font matching, SVG allows the font-family to be a list of font family names; the user agent will use the first font family that it recognizes. The graphic artist might list similar Microsoft, Apple, and Unix fonts to improve the chance of the user agent having the desired font. Additionally, SVG supports the CSS generic font family specification.[31][32] That means most SVG user agents should support the generic font families of serif, sans-serif, cursive, fantasy, and monospace. It is good practice to use a generic font family as the last entry in the font family list. For the librsvg on Commons:

  • sans-serif maps to DejaVu Sans
  • serif maps to DejaVu Serif
  • cursive maps to the uninteresting DejaVu Sans
  • fantasy maps to the uninteresting DejaVu Sans
  • monospace maps to DejaVu Sans Mono

On Commons, librsvg has the fonts listed in m:SVG fonts#Latin (basic) fonts comparison. Using just those fonts will get good results in Wikipedia articles that display their images using librsvg, but graphic artists should also be aware that SVG files may be displayed by other user agents. Consequently, it is best to use common font families (such as Arial) or a list of font families that ends with a generic font family (such as Trebuchet, sans-serif).

The font metrics for generic font families such as sans-serif will likely vary widely on different user agents. In graphic illustrations metric exact text elements are often important and Arial can be seen as de-facto standard for such a feature. Adding both Arial and sans-serif as fallback fonts will help the SVG to be displayed with best effort on machines that do not have or substitute Arial. To make the SVG file independent of Arial, change all occurrences of font-family: Arial to font-family: 'Liberation Sans', Arial, sans-serif.

If you are using non-Western characters, you should define those typefaces preceding Liberation Sans. For example, if your text contains Chinese characters, font-family definition should be: ‘ Liberation Sans, Arial, WenQuanYi Zen Hei, SimHei, sans-serif’. In this case, western fonts are put in the front because the quality of Western characters in Chinese fonts is often low, and we want to use the higher-quality ones first.

  • Inkscape begins supporting fallback fonts from version 0.91.
  • Adobe Illustrator version 18.1.1 or earlier (probably in later versions as well) does not support fallback fonts, so the SVG file has to be manually updated in a text editor after it is saved.
defined font Wiki-fallback possible fallbackdefinition, which look similar (works on Wikimedia/Windows/Linux/Mac)
[-no definition-] Liberation Serif
serif DejaVu Serif[33]
Times New Roman Liberation Serif font-family="Liberation Serif,Times New Roman,Times,Times-Roman,serif"
sans-serif DejaVu Sans[33]
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"
Courier New Liberation Mono font-family="Liberation Mono,Courier New,Courier,monospace"
monospace DejaVu Sans Mono
[-everything unknown-] DejaVu Sans

Lay-out met elementen text en tspan

Although you can use only the text element to render simple text in the image, the tspan element can be useful to handle text which the position of the word is dependent to the other.[34] A tspan element must be nested within the text element, and then more tspan can be nested within this tspan, all styling defined in the parent text element will be inherited by its child tspan elements. For example: 

<g font-size="12px">
  <text font-weight="bold" x="10" y="10"><span lang="en" dir="ltr" class="mw-content-ltr">Wikipedia hosts knowledge</span>
    <tspan fill="blue"> <div lang="en" dir="ltr" class="mw-content-ltr">
contributed
      <tspan text-anchor="end" dy="12"> by volunteers</tspan>
</div>
    </tspan>
  </text>
  <text font-style="italic" x="15" y="30"><span lang="en" dir="ltr" class="mw-content-ltr">Wikimedia Commons hosts free media files for all sister projects.</span></text>
</g>

The primarily difference with the "g nesting text" structure is that few important text layout behaviors are exclusive to tspan: When multiple text elements are lined up consecutively, they still position themselves independently; if multiple tspan elements are lined up consecutively but the second and subsequent tspan elements are not given absolute x coordinate, text of these tspan elements will line up horizontally right next to the end of the character of prior tspan in the same 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.[35] 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.

The behaviors in different SVG renderers to this issue varies much and is usually inconsistent to the W3C specification (also the 'preserve' value of xml:space will be deprecated in SVG 2.[36]). The only problem with librsvg is that it never converts the line break alone into space no matter which value of xml:space is given if there is no trailing space or indent before the tspan tag. Except for librsvg, nearly all modern browsers always add the converted space character right after the preceding text, this is the reason why the end or middle values of text-anchor property always align the text 1 space leftward because the new line and/or the trailing tab or space after the closing tspan tag is converted to an unexpected space character.[37]

Re-indentation XML Code Result
Before 
<text>
  <tspan>O</tspan><tspan>n</tspan><tspan>e</tspan>
</text>
One
After 
<text>
  <tspan>O</tspan>
  <tspan>n</tspan>
  <tspan>e</tspan>
</text>
O n e

Inkscape is buggy to render tspan, for example, inheriting text-anchor property from the first tspan element incorrectly for the subsequent tspan elements even if the property is specifically given a value in all tspan elements.[38] In such case, simply revert the "text nestling tspan" structure to just "g nestling text". Inkscape also defaults to xml:space="preserve" to deal with space between tspan. If you are completely concern with how your SVG appears in Inkscape but prefer the default xml:space handling, use &#160; to replace each general space so it will not be hidden in Inkscape.

If you are generating an SVG using Adobe Illustrator, you will be given options to "Output fewer <tspan> elements" and "Use <textPath> element for Text on Path" during the save dialog. To maximize the consistency of the appearance of your font across browser platforms, you should place a check mark next to the former and make sure there is no check mark next to the latter. If you do not do this, the kerning of some of your letters may cause them to overlap (depending on your browser).

Regelovergang

SVG 1.1 does not provide any form of line wrap (either hard or soft). Any line wrap should be done manually by repositioning new text or tspan elements with the same absolute x coordinate and a new y coordinate. For tspan elements, the next line's y coordinate can be set with the dy attribute. Although textPath can handle a similar situation,[39] this element is not supported by librsvg/Wikimedia (phab:T11420).

A draft of SVG 1.2 did address line wrapping, but there is little support.

The draft of SVG 2.0 also addresses line wrapping, but Chrome, Firefox, Edge, and librsvg do not support it as of May 2018.

class opmaak lettertype

Usually it is simply gratuitous use of the ‘style attribute’. To ease the process of updating font-family for every text or tspan elements, you can define the font CSS class(es) within ‘style element’ and apply the class property in elements like this: 

<style type="text/css">
text {font-size:12px; font-family:Liberation Sans, Arial, sans-serif} <!-- <span lang="en" dir="ltr" class="mw-content-ltr">General font styling</span> -->
.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 defined in ‘style element’ can also be used for other SVG elements (e.g. g and path) despite the misleading type="text/css" attribute. Even if one particular style is defined once in the SVG, it is still advised to replace the style with class for a tidier layout of XML codes.

Contrary to popular belief the style attribute does not separate content from presentation, and unless you need to override properties set by a CSS selector, it is best to use the SVG formatting attributes instead (e.g. <path fill="#fff" stroke="none"/> instead of <path style="fill:#fff;stroke:none"/>).[40] However, if you need to override the element style defined in style element, you do need to employ style attribute. If you need to override the style for text element without style attribute, you can use a tspan element container to nest the text you need to override the style, presuming there is nothing predefined in style element for tspan element.

Note
  • phab:T68672 – CSS style element get ignored if the default value type="text/css" is omitted.
  • phab:T43423 – CSS child selectors are not supported by librsvg.
  • phab:T68551 – CSS classes on text elements get not inherited on child tspan elements. If you want this, you need to add a separate class for tspan as well, or use simply groups (but not in the text element as it Scour unfortunately does).

Tekst met achtergrondrand

Sometimes the text might be unreadable because the background color has low contrast with the font color or the pattern is too complicated that confuses the reader. This can be solved by duplicating the text in exactly the same position, but the back text rendered with stroke and the fore text without it like this: 

<text style="font-size:12px">
  <tspan x="10" y="20" style="stroke:white; stroke-width:3px; stroke-linejoin:round;"><span lang="en" dir="ltr" class="mw-content-ltr">Placeholder</span></tspan>
  <tspan x="10" y="20"><span lang="en" dir="ltr" class="mw-content-ltr">Placeholder</span></tspan>
</text>
  • "stroke-linejoin:round" is defined to avoid sharp corner of the text stroke.

The problem with applying stroke and fill to the same text element is that the stroke will be rendered over the main body of text, making it otherwise unreadable if the font is too small but requires a larger stroke to be distinguishable from the background.

SVG filters can be used to draw the text over a dilated version of the text. The filter first expands the text, sets the color of the expanded text, and then draws the original text over the dilated version. One filter can be defined, and that filter can be used by several text blocks: 

<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 can also be used to size an opaque rectangular background that surrounds the text. Using a filter is more robust than painting a rectangle and then painting the text on top of that rectangle. A fixed-size rectangle may not fit the font used for the text; the size of the rectangle would also need adjustment if the text changes. If the text is translated, for example, the rectangle may need to be changed. Using a filter automatically adjusts the size. 

<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>

Outlining text can be done without filters by explicitly rendering the text twice. The first time, the text is rendered with a white stroke to set the outline. The white outline erodes the text. The text is rendered a second time, but this time the text is not stroked. Consequently, the characters are rendered full size (without erosion).

If you have lot of text that needs to be rendered with a stroke background, you can manually include the text within <g>, <text> and <tspan> elements. The <g> element which will be rendered underneath, apply the stroke, then <use> the text group of <text> element without a stroke and fill the font with contrasting color: 

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

W3C includes paint-order property in SVG 2.0 which allows the order to render the attributes of "fill", "stroke" and "markers" within one element arranged by the user manually, instead of following the default mandatory order.[41]

Mozilla Firefox also includes this attribute experimentally but it defaults to disable in the stable release until SVG 2.0 matures. This feature can be enabled in the about:config entries of Firefox.[42]

Kleurverlopen

An example of incorrect rendering by Mozilla Firefox.

Users of Inkscape version 0.46 may notice that images with "Fill gradients" display perfectly on Inkscape, but display "messed up" in Opera or Firefox browsers. One possible cause is that the last "stop" on a gradient has opacity set to 0. Inkscape appears to ignore this last stop, but both Firefox 3.0.6 and Opera 9.36 will render it as a white border in the filled object. Solutions are either remove the last stop (because it was probably created in error) or change the opacity (and colour) so that the image renders correctly in browsers.

Note that Inkscape adds a JavaScript polyfill to SVG images containing mesh gradients. Scripted SVG images cannot be uploaded to Wikimedia Commons, but removing the JavaScript code will break the gradients.

Users of Adobe Illustrator CS5, CS6, or CC and who also use Firefox may notice that an Illustrator "symbol" containing a gradient will render normally as a Commons PNG file but if the SVG file itself is opened in Firefox these symbols will appear vacant. Other browsers will have no difficulty— Google Chrome, even Internet Explorer will render Illustrator’s SVG symbol gradients correctly, but because of a known bug that the designers of Firefox have been aware of since 2005 (Mozilla’s Bugzilla bug 376027 and other reports that lead to it such as bug 353575) but have so far failed to adequately fix, Firefox will display such symbols as empty shapes (symbol strokes and symbol paths without gradients are unaffected).

Adobe Illustrator users should also note that any Illustrator "symbols" containing paths with both a gradient and a filter will be rendered as a PNG in Commons only within the first instance of the use of that symbol. Subsequent use of a symbol containing these paths will render the paths (though not the entire symbol) as blank (neither gradient nor filter nor fill nor stroke will be applied).

Blurring

Comparison of gaussian blur filter effect between Google Chrome and Wikimedia. (Source SVG file)

Wikimedia’s SVG renderer currently supports various filter effects, but some effects such as gaussian blur (feGaussianBlur) behave differently when the blurred object exceeds the edge of the actual image. The current version of RSVG will treat the cropped edge as the actual edge of the object to apply the effect (as if the object has applied clipPath before applying filter effect), creating an undesirable filter effect against the image edge.

Size

Reducing the file size

If the file is too big, reduce/optimize it by:

Translations

SVG files can be translated and can be multilingual (have embedded translations). For more information, see Commons:Translation possible/Learn more.

Naar SVG converteren

See also: Commons:Media for cleanup.

Given an image file that is in a format other than SVG, there are various ways to convert it to SVG; see § Converters for programs.

Note: For vector images where the vectorization was done by a third party, there is the issue where the vectorization code may have its own copyright even if the depicted image itself is out of copyright or below the threshold of originality. See § Copyright for more info.

Generally, there are 3 ways to produce an SVG file, given an existing image:

  1. Regenerate it
  2. Convert it
  3. Create a new one

If you are unable to convert an image yourself, please add the tag {{Convert to SVG}} to flag that the image should be converted. Some images are not well-suited to SVG, notably continuous-tone images such as photographs. These generally should instead be stored as JPG.

Regenerate it

If the image was generated by a program (rather than drawn by hand) — for example, a chart from a spreadsheet — it may be possible to set the output format to SVG, rather than PNG or other format, and thus produce an SVG image from the same source. If possible, this is generally easiest.

Convert it

Many vector file formats can be easily converted to SVG simply by changing the format (repackaging the existing data), by using a converter program. This may be as simple as opening the file in a vector image editor and then saving it in SVG.

For raster (bitmap) graphics, this cannot be done because the image is a set of individual pixel values, not a set of strokes (vectors). For these images (notably PNG images), one can convert to SVG via "vectorization" or "tracing" — automatically generating a vector graphic from a raster image.

Veel SVG-editors hebben overtrekfuncties en er bestaan speciale converters. In Inkscape wordt dit gedaan door het programma potrace.[46][47] 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 also allows for the conversion of bitmap images into vectors via its Image Trace function. Care must be taken when doing so that the resulting vector image is neither ponderously large (often the result of too much conversion fidelity with regard to color and shape) nor so simple that it loses faithfulness to the original image. Converted images almost always require some manual correction after conversion. As in Inkscape, the underlying bitmap should be removed after conversion is complete.

It should also be noted that when Illustrator converts one of its files into an SVG file, it tends to convert a number of shading effects such as "inner glow", "outer glow", and gradients applied along or across a path into undesirable raster images which it then embeds in the SVG image using links. Such embedded images can often be immediately detected by viewing the image in a web browser under high zoom where they will appear cloudy or have visibly jagged edges (neither of which is ever true of a correctly rendered vector image). As these effects were originally created without regard to the W3C consortium, Adobe does not offer and is never likely to have a solution to the problem.

In order to remove raster components from an Adobe Illustrator-generated SVG prior to uploading the image to Commons, the artist must first be able to identify where Illustrator has put them. This can be done in the following way:

First finish editing an image file and save in Illustrator’s AI format (*.AI), then save it again in SVG format. During the second Save dialogue, choose to "embed" the links (for now). Then close out the image (File=>Close or Ctrl+w). Next, open the SVG version back up again, click on "Window" from the right side of the top menu bar, and scroll down to "Links". This will open up a small window containing information about each of the links (if any) which currently exist in the SVG image (whether or not Illustrator produced them). You can click any of the entries in the top half of the window and then select the "Go to link" button located in about the middle of it-- this will take you to that particular raster so that you can identify it and either remove it or replace it with a non-raster based alternative.

Note that this SVG version of your image, when viewed in Illustrator, may look very different from the same SVG file you thought you had saved just a few minutes prior: this is because Illustrator has made a set of codes during the creation of that file which it then has difficulty reading (SVG is not an Illustrator-proprietary format, AI is, and so while Illustrator will never have difficulty correctly viewing an AI (Adobe Illustrator) file, it will sometimes struggle to correctly render an SVG, even one that it itself produced). Fortunately, even an SVG that looks confusing in Illustrator will usually at least appear to render correctly in most browsers (with the occasional and already noted exception of Firefox) and in Inkscape.

Create a new one

If an image cannot be regenerated or converted, the remaining option is to recreate it — draw a new SVG image, using the existing image as a model. This is manual and the most time-consuming option, but may ultimately yield the highest quality.

In all cases, it may prove useful to touch up the resulting image in an SVG editor — perhaps adding details which are hard or impossible to produce in the originating program, or simplifying or refining a complex conversion (such as simplifying a path described by 100 points to one described by 5 points, if extra points add unnecessary detail).

Once you have created an SVG image, upload it (under a new name), and tag the original raster image with {{Vector version available}}, but please do not delete the raster image or list it for deletion, as it still serves some purposes — see Commons:Superseded images policy for details.

Uploading & categorizing

Every SVG file uploaded to Wikimedia Commons should show how it was made: use template {{Inkscape}}, {{Adobe}}, {{HandSVG}}, etc.
You should check the appearance and the validity before you upload the file; use the tool Commons SVG Checker
If you are not sure or want to see first how librsvg will render your file, upload it to Test.svg

Image description pages

Uploading is described at Commons:Eerste stappen/bestanden uploaden.

Make sure to fill out the {{Information}} box as fully as you can. Often, it’s a help when an image has a complete information box as this makes categorization by others easier and allows others to make translations.

See the § SVG software tags section for detailed information on a SVG media.

Categorizing SVG files

SVG files
SVG by country
SVG by creator
SVG by language
SVG by source
SVG by subject
SVG by technical feature
Featured pictures on Wikimedia Commons - vector
Quality images - vector
Categories which should only contain SVG files
SVG cartoons
SVG coat of arms elements
SVG color gradient
SVG diagrams
SVG example images
SVG files generated by ChatGPT
SVG files with errors
SVG frames
SVG human hands
SVG icons
SVG image placeholders
SVG line art
SVG military map symbols by contents
SVG OpenData RATP Indices
SVG passport covers
Perspective SVG
SVG pixel art
SVG posters
SVG printing art
SuperTinyIcons
Tux Paint SVG
SVG related to Wikipedia
Wikipedia 20 derivatives/svg

All SVG graphics should be sorted into the appropriate subcategory or subcategories of Category:SVG files. Please do not place images directly in the parent category as it will become overcrowded and useless (we have thousands and thousands of more than 100,000 SVG files).

Sort subcategories which rely not on subject but on technical aspects ("created with…", "animated", "valid", and so on) by '*' to keep them outside the alphabet listing.

The SVG categories tree

The main tree is Category:SVG, as a part of Category:Images → Category:Media types.

Concerning the creation of topical subcategories, it is unnecessary to rebuild the complete hierarchy tree of Category:Topics. Normally, it is enough to gather some topics into one. For instance, Category:SVG colors could contain all color-related SVG files of Category:Colors, so it’s pointless to create Category:SVG red, Category:SVG blue and so on. Maybe some subcategories will become useful later, but stay close to the existing topics tree, and do not put any SVG files only into a SVG category: Categories are primarily for finding media, not for hiding them. Do not over-categorize.

See Commons:Categorieën for general information.

Category naming conventions

Category names start with "SVG" followed by the topic in lowercase (unless it’s a proper noun). For example, a category containing SVG files related to chemistry would be called Category:SVG chemistry. There was no naming convention for a long time, thus you may see titles that do not match this format. These will be converted over time.

SVG-bestanden taggen

See Category:SVG marker templates for all SVG markers available.
Other languages:
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):

 
This vector image was created with Adobe Illustrator.
 
This table was created with bin2svg.
 
This structural formula was created with ChemDraw.
 
This vector image was created with CorelDRAW.
 
This diagram was created with Dia.
 
This circuit diagram was created with the Electrical Symbols Library.
 
This vector image was created with Xfig and a Fig-to-SVG conversion tool.
 
This plot was created with Gnuplot.
 
The SVG code is valid.
 
This vector image was created with a text editor.
 
This vector image was created with Inkscape.
 
The SVG code is valid.
 
This vector image was created with Inkscape, and then manually edited
.
 
This vector image was created with MetaPost.
 
This vector image was created with Sodipodi.
 
This vector image was created with Scribus.
 
The SVG code is valid.
 
This vector image was created with a text editor.
 
This vector image was created with another SVG tool.
 
This vector image was created with an unknown SVG tool.
 
This vector image was created with Vim.
 
This vector image was extracted with Inkscape.


See #Software section for a list of programs.

SVG file tags

 
This image includes elements that have been taken or adapted from this file:
 Example.svg.
Translate this file 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.
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.

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}}.




SVG conversion tags

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}}.

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 HanV at 11:15, 9 mei 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}}.
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 ∙ русский ∙ 日本語 ∙ 한국어 ∙ 中文 ∙ 中文（简体） ∙ 中文（繁體） ∙ +/−
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.
italiano ∙ Deutsch ∙ magyar ∙ English ∙ español ∙ svenska ∙ Tiếng Việt ∙ беларуская (тарашкевіца)‎ ∙ македонски ∙ русский ∙ slovenščina ∙ ไทย ∙ 日本語 ∙ 中文（中国大陆）‎ ∙ 中文 ∙ 中文（台灣）‎ ∙ 中文（新加坡）‎ ∙ 中文（简体）‎ ∙ 中文（繁體）‎ ∙ 中文（香港）‎ ∙ +/−
This file has been superseded by Example.svg. It is recommended to use the other file. Please note that deleting superseded images requires consent.
 new file
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 ∙ 简体中文 ∙ 繁體中文 ∙ +/−

{{{svgImageLabel}}}

{{{image alt}}} 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:
  1. Download this SVG.
  2. Open the SVG in an SVG editor and change the wording and numbering.
  3. Convert all text to a path and save as a basic or plain SVG.
  4. Upload the new SVG to Wikimedia Commons.

SVG files in MediaWiki

Hoe SVG-bestanden werken in MediaWiki

When you upload your SVG to Commons (or any other MediaWiki wiki), the software automatically produces PNG thumbnails, embedded in the articles and the description page. If you download the image (usually by right mouse clicking on the image), you will get the PNG image. If you want the SVG file you must save the link to the image instead of the image itself. This works (by right mouse clicking on the link under the image) only on the description page of the image, not on the thumbnail in the category page.

MediaWiki uses librsvg to convert SVG files to PNG files for display (SVG rendering), it has some long and well-known bugs that should be fixed, so you might want to check your file with that program before uploading. You can test the SVG with SVG Check for accurate PNG render preview and W3 XML validator for possible code errors or incompatibility of SVG elements or attributes.

Further information: MediaWiki SVG limitations.

SVG-bestanden schalen via MediaWiki

What this means: Say you want to produce a large version of your SVG for detailed maps, or using in-bitmap software like gimp, or calligraphy printed out one character per page, or something like that. You need to force MediaWiki to produce a huge PNG thumbnail, by using https://commons.wikimedia.org/w/thumb.php?f=Foo.svg&w=1000 or by doing something like [[File:Foo.svg|1000px]] in the sandbox or your talk page or somewhere else unimportant. Printing this giant PNG will look much better than if you try to scale up one of the default thumbnails! Of course, you can also use for-printing SVG software like Inkscape but sometimes that shows something other than what’s shown on-screen (black background, other fonts, etc.).

Frequently asked questions

What are reasonable dimensions to choose for my SVG images?
The absolute size of the document does not matter much, since that only affects how it is displayed when viewed by itself. The file size does not depend on the document dimensions. The image can be stretched or compressed as much as a user wants, without changing quality, or file size. With that in mind, the recommended image height is around 400–600 pixels. When a user views the full size image, a width of 600–800 pixels gives them a good close-up view, while still allowing them to fit the entire image on their screen without having to zoom in or out: while 9 × 9 pixels are too tiny, 3000 × 2000 are too large. The length of the shorter side of the PNG rendered by librsvg on Wikimedia is capped at 4096 px (i.e. if width is shorter than height, the length cap of 4096 px will be applied on the width and the height will be scaled accordingly, or vice versa), so there is no point to upload SVG image which requires that much of resolution to be readable when some of the text will be too tiny after scaling down to preview size. Smallest font in SVG image should be readable in 2000-px width at least, the largest recommended rendering resolution in the image description page. Otherwise, a raster version should be provided alongside the SVG source.
How to convert SVG file to raster format in my computer?
For SVG file which behaves incorrectly in graphic software such as Inkscape, you can simply upload the SVG to Wikimedia then save the link which provides PNG render in other widths in the file description page. You can adjust the number-px in the link to generate the desirable width of the PNG render. For image with any side larger than 4096 px, you may use any conversion tools such as RSVG-Convert with the only difference being the lack of anti-aliasing. If you want the raster image looks smoother, you may convert the SVG to PDF in RSVG-Convert then convert the PDF to raster version in Photoshop (Inkscape still presents some font problem when opening PDF). Another option without uploading SVG source to Wikimedia (due to non-free license) is to use the SVG preview on Wikimedia Toolforge which does not have the maximum side cap, although certain rendering results such as font may differ slightly.
Why doesn't my image render?
This might be due to a number of reasons. Most often it is due to a reference to an external file, a leftover from tracing a bitmap, perhaps. (The rendering stops as the website tries to find this other file) To solve this problem, in your editor, make sure to remove any references to other files before saving the final version. If it is necessary to use bitmaps you can use in Inkscape the function to embedding all images (Effects menu → Images → Embed All Images). It’s also possible that you use special effects like blurring. Unfortunately it’s currently not well supported by librsvg. See also § Plain SVG, compressed SVG, generic specifications hereinbefore.
Where can I get extra help with SVG images?
Try Commons:Graphic Lab if you have a problem with an individual image. Commons:Graphics village pump can be useful for SVG discussion (as well as graphics in general). Often SVG enthusiasts will be around on those pages, and are more than willing to help.
How do you change the document size in Inkscape?
The document size starts out with an A4 page. To make this larger or smaller, create a rectangle with the dimensions you desire the document to be, and select it with the arrow tool. Then select File → Document Properties, and under Custom Size, choose Fit page to selection, and click OK. You can now delete the "sizing" rectangle, and move or resize the other elements to fit the space you have created.
My text is appearing as little blocks, or isn't showing up at all after uploading to Commons!
If you use "Flowed Text" in Inkscape, it will not render at all. Flowed text boxes are created when you click and drag to make you text box. To avoid this, just click once to position your cursor and then type your text. To convert a flowed text box to a normal text box, go to the "Text" menu and choose "Convert to Text".
If this still doesn't work, some text features of Inkscape are not supported by MediaWiki’s renderer, such as text-on-path. If you are not using flowed text and still have problem, convert the text to paths. Do this by selecting the command Path → Object to Path. This will convert the text to paths. Save as plain SVG, and reupload your file.
My arrowheads/dashed lines are appearing as little blocks, or aren't showing up at all after uploading to Commons!
Check that attribute style="overflow:visible" is in tag marker and not in tag path. Some stroke features of Inkscape are not supported by MediaWiki’s renderer. Select the offending objects, and select the command Path → Stroke to Path. This will convert the strokes to paths. Save as plain SVG, and reupload your file.
How do I get rid of the transparent background?
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!
My fonts aren't rendering correctly. What fonts are supported by the site’s renderer?
See meta:SVG fonts for a list.
I am using the same fonts installed in Wikimedia, but text positioning in my SVG image still looks differently between my local render and the Wikimedia render.
It depends on which rendering library and version your local renderer is using. Text positioning and other SVG aspects (such as "transform") are known to behave differently in different rendering libraries. For closest result to Wikimedia render, you should use whatever renderer which uses librsvg. Opera, Chrome and Safari gives accurate results. Firefox and Internet Explorer 10 are slightly inaccurate. Safari looks neater when certain font smoothing is enabled.
I'm drawing a flag (or some other insignia) and it asks for PANTONE or CMYK colors. What do I do?
First, if you see the words*PANTONE or CMYK, try to see if they have something called RGB. Wikimedia Commons images are used a lot on Wikimedia projects such as Wikipedia, etc, and are designed for use on computer screens. If you can find RGB colors, use them in favour of others. If you can't, you can convert the colors using your program’s own color picker, or, in the case of PANTONE, Color Finder,[2] from which you can extract RGB values for a color code. Make sure to indicate (perhaps on the talk page or image summary) which method of conversion you used, like "[Some Program] was used to convert CMYK values […] to RGB […]".

Software

Many programs can handle SVG files. You may like to try one given below, though these are not the only programs around. Some are available for free download, while others are commercial software.

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.[48] 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

All modern web browsers render SVG natively.

Converters

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

  • toolforge:convert, a PDF-to-SVG and SVG-to-PNG converter
  • Autotrace (WARNING: at least one of the links there has been usurped by a phishing site), a library developed in 2004 by Martin Weber that the following tools use:
  • Scribus (with GhostScript), an EPS-to-SVG converter
  • PDFTron PDF2SVG, commercial PDF-to-SVG converter for Windows
  • Barton PDF2SVG, a PDF-to-SVG converter for Linux, which uses two free libraries called "Poppler" and "Cairo"
  • librsvg, a rendering library used by MediaWiki and the following converters:
    • RSVG-Convert, and open-source tool that converts SVG to PNG, PDF or PS
  • Bitmap to SVG converter - useful for converting pixel art
  • Vectorizer.AI, an artificial intelligence-based online tracer to convert raster image
  • PDF24 Tools, including an online PDF-to-SVG converter


Redacteuren


Specialized app

  • Ipe, a free and open-source editor with an SVG converter, with good LaTeX integration for mathematical and technical diagrams
  • Scour. For tidying up/create a smaller file size (in Python, also included in Inkscape).
  • Graphviz. An open source application for automatic diagram layout.
  • BKchem. A free software to draw chemical structures in SVG. Runs on Windows, Mac OS X, and Unix systems.
  • Freemind is a free and open source mind mapping application written in Java. FreeMind.
  • GeoGebra is a free and open source multi-platform mathematics software with ability to export SVG. Geogebra.
  • LibreOffice Calc (libreoffice.org), for creating bar charts, pie charts, etc.
  • Gnumeric spreadsheet, saves/exports charts in SVG format, cf. gnumeric.
  • Nano by Vecta.io - reduces file sizes
  • SVGO - reduces file sizes
  • SVGOMG - a web-based front-end for SVGO


Copyright

There is some concern that the SVG source code of images might be copyrightable as a "computer program" even if the output is an image in the public domain due to being below the threshold of originality or otherwise indistinguishable from a work that is public domain due to copyright expiration. This could mean that even though the output of an SVG, the image, is in public domain, the code could be restrictively copyrighted, and therefore inappropriate for including in Wikimedia Commons.

Elements that weigh in favor of SVG source code containing sufficient creative expression to be copyrightable might include hand-written code, complex embedded CSS, embedded comments longer than short phrases, or a large carefully selected set of control points. Elements that weigh in favor of SVG source code lacking creativity include programmatically generated code or slavish copying of a public domain source. See the following for additional context:

See also

Maintenance:

References

  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. ↑ http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
  3. ↑ SVG-broncodebewerkingen zonder visuele wijziging
  4. ↑ W3C – geldige DTD-lijst – Optionele doctype-declaraties
  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. ↑ http://www.w3.org/TR/SVG/struct.html#NewDocumentOverview
  9. ↑ W3C: SVG linking
  10. ↑ W3C: SVG viewBox
  11. ↑ Philip Rogers (2015-04-30). Intent to deprecate: SMIL. Google Groups. Retrieved on 2015-06-27.
  12. ↑ https://caniuse.com/#feat=svg-smil
  13. ↑ https://github.com/svg/svgo/issues/1055
  14. ↑ https://github.com/RazrFalcon/svgcleaner/issues/213#issuecomment-589801095
  15. ↑ https://github.com/scour-project/scour/commits/master
  16. ↑ User:JoKalliauer/Optimization#SVG sourcecode edits without visual change
  17. ↑ User:JoKalliauer/Optimization#Useless elements that should be kept
  18. ↑ https://github.com/scour-project/scour/wiki/Documentation#--renderer-workaround-and---no-renderer-workaround
  19. ↑ Inkscape FAQ: What about flowed text?
  20. ↑ You can change the colour, of the invisible path, which is used as the boundary of the flowRoot, similar to File:FlowRoot and flowRegion.svg, or you could also use the more general path-tag and create other shapes.
  21. ↑ User:JoKalliauer/RepairFlowRoot#replace notempty flow-text using (Inkscape)
  22. ↑ some cases that uses translate=".."-attributes or some cases that use text-align=".."-attributes
  23. ↑ See for example: File:Petit Monde de Gondry, Jonze & Kaufman.svg
  24. ↑ Which can also be downloaded from Github
  25. ↑ User:JoKalliauer/RepairFlowRoot#delete empty flow-text using (Text-Editor)
  26. ↑ Category:Images with SVG 1.2 features
  27. ↑ User:JoKalliauer/RepairFlowRoot#That the black square won't get rendered (Text-Editor)
  28. ↑ Attribute viewBox in SVG element takes precedence in defining the native resolution if it differs from width and height attributes.
  29. ↑ Font-kerning: Help with file at Graphics village pump, compare also File:Fonttest-Kerning.svg.
  30. ↑ textLenght attribute in w3.org
  31. ↑ http://www.w3.org/TR/SVG/fonts.html#FontFaceElementFontFamilyAttribute
  32. ↑ www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#generic-font-families
  33. ↑ a b User:AntiCompositeNumber on phab:T180923#6557063
  34. ↑ W3C: SVG – The ‘tspan’ element
  35. ↑ W3C: SVG – Witruimtebehandeling
  36. ↑ W3C: SVG 2 - The ‘xml:lang’ and ‘xml:space’ attributes
  37. ↑ librsvg still preserves this extra space character but during the middle or end text alignments, this space character is ignored.
  38. ↑ https://bugs.launchpad.net/inkscape/+bug/168023
  39. ↑ W3C: SVG – The ‘textPath’ element
  40. ↑ Avoid the ‚style‘ attribute where possible
  41. ↑ Chapter 11: Painting: Filling, Stroking and Marker Symbols. W3C (2012-08-12). Retrieved on 2012-11-28.
  42. ↑ paint-order. Mozilla Developer Network (2013-01-12). Retrieved on 2013-10-21.
  43. ↑ A Simple Trick for Optimizing SVG Files by WebpageFX
  44. ↑ 35-optimizing-svg-tools by CSS-Tricks
  45. ↑ css-tricks : understanding-and-manually-improving-svg-optimization
  46. ↑ Inkscape tutorial: Tracing
  47. ↑ Inkscape wiki: Hulpmiddelen: Naar Vector converteren/overtrekken
  48. ↑ Afbeelding gemaakt met C++-code door Claudio Rocchini
  49. ↑ User:JoKalliauer/SVG test suites

External links

Retrieved from "https://commons.wikimedia.org/w/index.php?title=Help:SVG/nl&oldid=875305301"