Hilfe:SVG

Shortcut: COM:SVG

SVG (skalierbare Vektorgrafiken) ist ein akzeptiertes Dateiformat auf Wikimedia Commons. Es eignet sich fur Diagramme, Karten und andere nicht-fotografische Bilder.SVG-Dateien werden sehr wertvoll, weil sie grafische Objekte mit Quellcode beschreiben und somit leicht zu verandern und zu verbessern sind.

SVG-Dateien sind auf Wikimedia Commons weit verbreitet. Wenn du bereits weisst, welches Programm du zur Erstellung von SVG-Dateien verwenden wirst, kannst du zusatzlich zu den folgenden auch Hilfe:Illustrator oder Hilfe:Inkscape nachsehen.

Scalable Vector Graphics (SVG) ist eine XML Spezifikation und ein Dateiformat zur Beschreibung von zweidimensionalen vector graphics (im Gegensatz zu einer ,,Bitmap" oder Rastergrafik) sowohl in statischer als auch in animierter Form. Es wird entweder im plain text oder im komprimierten (binaren) Format gespeichert, das wesentlich grosseneffizienter ist als die meisten anderen Bildformate wie JPEGs oder GIFs. SVGs erlauben auch die Einbettung von Rastergrafiken und editierbarem Text.

librsvg (alternativ ,,RSVG") ist die Rendering-Bibliothek, die von MediaWiki verwendet wird, um die SVG-Dateien in das PNG-Bitmap-Format zu rastern, das fur Wikimedia-Seiten verwendet wird. Das angezeigte Bild ist nicht SVG und daher weder animiert noch interaktiv. Ein Grund fur diese Wahl ist, dass das Rendern eines SVG in Echtzeit altere Computer oder Betriebssysteme verlangsamt. Eine Rasterversion, die effizient aus der SVG-Quelle konvertiert werden kann, hilft, dieses technische Problem zu uberwinden. Da einige einige SVG-Dateien gross sind (z.B. 1 MB), aber das Bild bei der Anzeige auf einem Monitor moglicherweise 160&mal;320 Pixel betragt, was unkomprimierte 51.200 Pixel waren (153.600 Byte bei 24-Bit-Farbe). Ein weiterer Grund ist, dass Webbrowser bei der Einfuhrung von SVG bei Wikimedia im Jahr 2005 eine besonders schlechte Unterstutzung fur die Darstellung von SVG hatten.

librsvg wurde seither mehrmals aktualisiert und ist bis 2024 der einzige SVG-Rasterer von Wikimedia geblieben. Trotz der enormen Fortschritte, die mit diesen Upgrades erreicht wurden, bleibt die Rasterung mit librsvg unzuverlassig. Die resultierenden Bitmaps sind haufig nicht originalgetreu, wie in librsvg bugs erklart.

Mehrere fehlende Funktionen und Fehler von librsvg wirken sich auf SVG-Bilder auf Commons aus. Daher mussen SVG-Dateien diese Probleme vermeiden oder umgehen. Zum Beispiel unterstutzt librsvg nicht die Funktion ,,Text auf einem Pfad". Selbst wenn librsvg einwandfrei funktioniert, kann es Kompatibilitatsprobleme geben, wenn eine SVG-Datei eine Schriftart verwendet, die in Commons nicht vorhanden ist.

In der SVG-Spezifikation ist das style-Element ^[1] mit seinem type-Attribut auf "text/css" voreingestellt.^[2] SVG-Bilder, die style-Elemente verwenden, sollten explizit type="text/css" in ihrem <style>-Tag setzen. (Mit anderen Worten: <style type="text/css"> sollte <style> vorgezogen werden.) (phab:T68672)

Siehe Not displayed text (Flowed Text bug)

RSVG vergleicht systemLanguage-Attribute nicht korrekt. SVG gibt an, dass es sich bei diesen Attributen um eine durch Kommata getrennte Liste von IETF-Sprach-Tags (langtag) handelt. RSVG stimmt nur mit dem ersten Subtag (die Gruppe von Zeichen vor dem ersten Bindestrich) im Langtag uberein, daher ignoriert RSVG alle nachfolgenden Landercode- oder Skript-Subtags. Zum Beispiel wird RSVG nicht zwischen zh-Hans (Chinesisch mit vereinfachter Schrift) und zh-Hant (Chinesisch mit traditioneller Schrift) unterscheiden. Um dieses Problem zu umgehen, kann ein privat genutztes Langtag (eines aus dem Bereich qaa-qtz) zur Angabe der Sprache verwendet werden.

Das Attribut systemLanguage sollte eine Liste von IETF-Langtags sein. Es gibt einige Verwirrung uber die richtigen Sprach-Tags. Fur Serbisch hat MediaWiki sr-EC und sr-EL verwendet, aber unter BCP 47 bedeuten diese Tags Serbisch, wie es in der Region EC (Ecuador) gesprochen wird, und Serbisch, wie es in EL (nicht zugewiesene Region) gesprochen wird. Die richtigen Langtags sind sr-Cyrl und sr-Latn. Der kyrillische Langtag sollte vor dem lateinischen Langtag stehen, damit die SVG 1.1 switch-Verarbeitung die kyrillische Schrift wahlt, wenn der Benutzer eine Spracheinstellung angegeben hat, die sr enthalt. (MediaWiki beginnt, korrekte Langtags zu verwenden; siehe Phab:T117845).

Chinesisch ist komplizierter. zh ist ein makrosprachlicher Subtag, der auf alle chinesischen Dialekte (z.B. Mandarin oder Kantonesisch) verweist. Man kann Mandarin mit zh-cmn spezifizieren, aber das IETF-Register^[3] bevorzugt die Verwendung von cmn. Ebenso bevorzugt die IETF statt zh-yue die Verwendung von yue fur Kantonesisch. Die chinesische Schrift kann angegeben werden: Hans ist die vereinfachte Schrift und Hant ist die traditionelle Schrift. Welche Langzeichen fur Chinesisch zu verwenden sind, ist unklar. Ein einfacher Ansatz (der von MediaWiki verwendete Ansatz) verwendet einfach zh-Hans oder zh-Hant, um das Skript zu spezifizieren (die IETF-Registrierung kennzeichnet beide als ,,redundant", bietet aber keine bevorzugte Alternative). Eine Alternative spezifiziert den Dialekt und die Schrift, z.B. cmn-Hans oder cmn-Hant. Ein regionales Langtag kann angehangt werden: cmn-Hans-CN (Mandarin mit vereinfachter Schrift, wie sie in China verwendet wird). Die Makrosprache und das Land werden ebenfalls verwendet: zh-CN impliziert Chinesisch mit vereinfachter Schrift und zh-TW impliziert Chinesisch mit traditioneller Schrift.

Fur MediaWiki haben die serbischen Seiten eine gemeinsame Quelle, die entweder in kyrillischer oder lateinischer Schrift wiedergegeben werden kann. In ahnlicher Weise haben die chinesischen Seiten eine gemeinsame Quelle, die entweder in Hans oder Hant wiedergegeben werden kann. Im Idealfall konnte ein chinesischer Leser die Hans-Schrift wahlen, und alle Bilder im Artikel wurden ebenfalls in Hans gerendert werden. Der gewunschte Effekt ware so etwas wie

• [[File:xyz.svg|lang=zh-hant|...]] fur die zh-Hant Leser und
• [[File:xyz.svg|lang=zh-hans|...]] fur die zh-Hans Leser.

Es ist nicht klar, ob und wie dies im MediaWiki geschehen kann.

Die maximale Grosse eines Attributs oder Textknoten eines SVG in MediaWiki betragt 10 MB. Dies bedeutet, dass ein eingebettetes Rasterbild nicht grosser als 6,9 MiB sein darf. Die Verwendung eingebetteter Rasterbilder wird nicht empfohlen.

Programme, die du zum Erstellen von SVG-Bildern verwenden konntest, werden im folgenden Abschnitt Editors gezeigt. Alternativ kannst du den SVG-Code direkt mit einem beliebigen Texteditor oder IDE bearbeiten.

In den folgenden Abschnitten werden spezifische Merkmale von SVG erlautert.

Obwohl dies keine Anforderung fur Commons ist, ist es eine gute Idee, eine Datei vor dem Hochladen uber den XML-Validator (https://validator.w3.org) oder den nu validator (https://validator.w3.org/nu/) des World Wide Web Consortium (W3C) laufen zu lassen. Der Validator kann Probleme mit einer SVG-Datei finden, die dazu fuhren konnen, dass die Datei auf verschiedenen Plattformen fehlerhaft gerendert wird. Die Validierung wird sich zum Beispiel uber die Verwendung von flowText-Elementen beschweren, die nicht dem Standard entsprechen und schlecht unterstutzt werden. Die Validierung einer Datei rechtfertigt jedoch in der Regel keinen erneuten Upload,^[4] fur Ausnahmen siehe Optimierung bereits hochgeladener SVGs.

Wenn die SVG-Datei eine DOCTYPE-Deklaration hat, dann verwendet der Validator diese DTD, um die Syntax zu prufen. Wenn keine DOCTYPE vorhanden ist (was weder erforderlich noch empfohlen wird),^[5][6] dann kann der Validator prufen, ob die Datei wohlgeformtes XML ist, aber er kann auch erkennen, dass die Datei SVG ist, und eine Nicht-DTD-Validierung durchfuhren, indem er die Datei an seinen nu-Validator ubergibt. Auf der W3C-Validator-Webseite kann man wahlen, ob die Datei als SVG 1.1 validiert werden soll. (Im kommenden SVG 2 Draft werden die Verweise auf die SVG DTD entfernt)^[7]

Falls im SVG-Dokument zusatzliche Namensraume vorhanden sind, wird der Validator diese beanstanden. Viele Werkzeuge, wie Adobe Illustrator und Inkscape, fugen Knoten in zusatzliche Namensraume ein.

Wenn der W3C-Validator eine Datei erhalt, die mit einem entsprechenden Content-Type HTTP-Header bereitgestellt wird, wird die Datei als SVG 1.1+XHTML+MathML 3.0 validiert (eine Option, die nicht uber die Dropdown-Box UI verfugbar ist). Diese Validierung wird von einem zweiten, moderneren Validator durchgefuhrt, dem nu-Validator (https://validator.w3.org/nu). Daruber hinaus gibt die Validierung keine Fehler fur die rdf Namespace-Elementbaume aus und verwendet Schemata zur Uberprufung der inkscape und sodipodi-Namensraume. DieSVG 1.1+XHTML+MathML 3.0-Validierung wird von {{ValidSVG}} verwendet.

Andere Namensraume verursachen weiterhin Validierungsfehler. Der W3C nu-Validator kann angewiesen werden, Fehler uber andere Namensraume mit dem nsfilter-Parameter.^[8] zu unterdrucken.

• SVG-Prufung, die cdml ns versteckt

Daruber hinaus fuhren Nicht-SVG 1.1-Attribute zu Validierungsfehlern. Der SVG 2.0-Entwurf erlaubt es Benutzern, wie in HTML 5.0 beliebige data-*-Attribute einzufugen, aber der W3C-Validator wird sich daruber beschweren.

Siehe Tagging SVG files, um zu erfahren, wie man eine Datei als validiert markiert.

Verschiedene Softwareprogramme und verschiedene Browser-Plattformen konnen die exakt gleiche SVG-Datei auf leicht unterschiedliche Weise darstellen. Die Art und Weise, wie du dein endgultiges Bild in einem Vektor-Bildeditor siehst, spiegelt moglicherweise nicht wider, wie dieses Bild aussehen wird, wenn es in Commons hochgeladen und von anderen betrachtet wird. Ausserdem werden alle SVG-Bilder automatisch in PNG-Dateien umgewandelt, wenn sie in einem Wikipedia-Artikel verwendet werden, und dies kann sich auch darauf auswirken, wie das endgultige Bild aussieht. Ein Beispiel fur Ersteres: Bei einem Bild, das eine Reihe sehr feiner Striche enthalt, werden diese Striche im Editor wahrscheinlich viel fetter und dicker aussehen, als wenn das Bild in SVG konvertiert und in einem Webbrowser betrachtet wird. Diejenigen, die SVG-Dateien erstellen, sollten in Betracht ziehen, ihre Arbeit im SVG-Format zu speichern und dann das gleiche Bild mit zwei oder drei verschiedenen Browsern zu offnen, um zu uberprufen, ob es wie beabsichtigt gerendert wird. Eine ahnliche Uberprufung kann auch durch Offnen der Datei in anderen Bildbearbeitungsprogrammen durchgefuhrt werden.

Um eine Vorschau zu sehen, wie eine SVG in PNG on Commons gerendert wird, gehe zu Commons SVG Checker.

Die Grunde, warum ein und dieselbe Datei je nach Kontext unterschiedlich dargestellt wird, sind darauf zuruckzufuhren, wie diese Kontexte (Browser oder Programme) den SVG-Code der Datei interpretieren und diesen Code zur Erzeugung des Bildes verwenden. Versuche, eine SVG-Datei mit dem ,,kleinsten gemeinsamen Nenner" zu erzeugen, die unabhangig vom verwendeten Browser korrekt gerendert wird, und gehe niemals davon aus, dass dein eigenes Bildbearbeitungsprogramm dir zeigt, wie das Bild fur andere Betrachter wirklich aussieht. Die Vorschau von SVGs in einem Web-Browser (und nicht in einem Vektorgrafik-Editor) kann einige Probleme aufdecken. Es ist manchmal hilfreich, den SVG-Code abzustimmen und zu optimieren, insbesondere in Verbindung mit DOM Inspector Tools.

Einige Programme erlauben es dir auch, rasterbasierte Komponenten in deine Datei einzufugen, ohne dich zu warnen, dass diese Komponenten, wenn die Datei in SVG konvertiert wird, nicht gleichzeitig in Vektoren umgewandelt werden, was bedeutet, dass du sehr vorsichtig sein musst, welche Arten von Filtern und Effekten du in ein Bild einschliesst, und dass du vor dem Hochladen der SVG-Datei in Commons prufen solltest, ob in einem Bild nicht fremde ,,Links" eingebettet sind. Wie du dies tust, ist von Programm zu Programm unterschiedlich.

Wenn du jedoch Adobe Illustrator verwendest, findest du hier Beispiele von Dingen, die Illustrator dazu veranlassen, einen Pfad in eine Rasterkomponente umzuwandeln:

• Jedes Muster, das auf jede Fullung angewendet wird, einschliesslich der Muster, die automatisch in Illustrator enthalten sind. Du kannst dies manchmal umgehen, indem du alle Muster, die dz selbst verwendet habst, in Raster umwandelst und diese dann mit der Funktion Image-Trace wieder in Vektoren umwandelst.
• Jeder Pfad, der mehr als einen von Illustrators ,,Effects" enthalt -- z. B. eine Fischaugenverzerrung und eine Freihandverzerrung. Illustrator kann nicht mit zwei dieser Effekte im Menu ,,Darstellung" eines einzelnen Pfades umgehen und rastert sie.
• Jeder Pfad, der mit einer Envelope-Verzerrung verandert wurde. Du kannst diese manchmal auf die gleiche Weise umgehen wie das oben erwahnte Musterproblem, aber die Ergebnisse sind in der Regel enttauschend.
• Jeder Pfad, dem im Menu Effekte der Effekt Raster zugewiesen wurde. Um diese als Vektoren beizubehalten, musst du diesen Effekt eventuell nur ruckgangig machen.
• Mit Illustrator konnen Benutzer auf drei Arten Verlaufe auf Striche anwenden: Verlaufe ,,innerhalb" der Striche, Verlaufe ,,entlang" der Striche und Verlaufe ,,uber" der Striche. Allerdings wird nur die erste dieser Moglichkeiten, Verlaufe innerhalb der Striche, von einem aquivalenten SVG-Code unterstutzt; alle Striche, die Verlaufe entlang oder uber die Striche hinweg enthalten, werden beim Speichern des Bildes im SVG-Format in Raster konvertiert.

Dies sind nur einige Beispiele von Dingen, die Illustrator dazu veranlassen, ein Raster zu erzeugen, wenn ein Vektor beabsichtigt war. Je einfacher diese Pfade sein konnen, desto wahrscheinlicher ist es, dass Illustrator sie als Vektoren beibehalten kann.

Fur weitere Informationen daruber, wie SVG-Dateien fur MediaWiki gepruft werden konnen siehe How SVG files work in MediaWiki.

Der Quellcode jeder SVG-Datei sollte ^[9] mit der XML-Verarbeitungsanweisung beginnen.^[10] Die XML-Verarbeitungsanweisung gibt die Version von XML und den Zeichensatz an.^[11] Das W3C besteht darauf, dass Zeichenkodierungsdeklaration verwendet werden sollte^[9][12] (der W3C-Validator warnt nur vor seinem Fehlen). Die Software, mit der du die SVG-Datei erstellst oder bearbeitest, sollte die Moglichkeit bieten, die Zeichenkodierung zu wahlen. UTF-8 ist empfohlen^[13] fur die Internationalisierung im Gegensatz zu ANSI oder andere Unicode-Kodierungen als UTF-8. Das Fehlen der XML-Deklaration wird zu einer leichten Verwirrung fuhren, wenn die SVG-Quelldatei auf einem Wikimedia-Server in einem Browser geoffnet wird: der reine XML-Code wird angezeigt, anstatt in ein Bild gerendert zu werden. Dies ist kein Problem, wenn du die SVG-Quelldatei auf deinem Gerat herunterladst und lokal offnest.

Eine DOCTYPE-Deklaration mit ihrer DTD wird nicht benotigt und es wird offiziell nicht empfohlen, eine DTD zu verwenden,^[6] aber es wird auch nicht empfohlen, keine DTD zu verwenden. SVG 1.0 und SVG 1.1 haben DTD-Spezifikationen, SVG 2.0 wird jedoch keine haben. Die SVG-DTD wird die SVG validieren, aber die DTD kennt keine Erweiterungen. Folglich listet ein DTD-Validator als Fehler RDF-Metadaten und die zusatzlichen Elemente und Attribute auf, die Inkscape in seine SVG-Ausgabe mit einschliesst. Wikimedia-Server schranken auch ein, was in die interne Teilmenge einer DTD aufgenommen werden kann, so dass es nicht mehr moglich ist, die SVG-DTD um zusatzliche Elemente und Attribute zu erweitern.

Es sollte das Wurzelelement svg folgen. Es muss^[1] den XML namespace fur SVG angeben, xmlns="http://www.w3.org/2000/svg";^[14] ohne den SVG-Namensraum wird ein SVG-Bild nicht gerendert. (Der Standard-Namensraum wird mit xmlns angegeben.) Andere Namensraume konnen im Element svg enthalten sein. Wenn die Datei beispielsweise Verlinkung verwendet,^[15] dann sollte der xlink Namensraum xmlns:xlink="http://www.w3.org/1999/xlink" deklariert werden. Die SVG version-Nummer sollte^[9] enthalten sein (typischerweise 1.1). Software liefert normalerweise diese Namensraumdeklarationen und kann andere Namensraume enthalten.

Die Standardwerte fur die Attribute width und height sind "100%"; diese Standardwerte erlauben eine automatische Skalierung. Ein Bild, das width="400px" angibt, erklart, dass es in einer Grosse von 400 Pixeln angezeigt werden mochte, anstatt seinen Container sauber zu fullen. Leider geben viele Software-Tools eine feste Grosse fur diese Attribute an. Das Element svg sollte ein viewBox^[16] Attribut angeben. Die Viewbox gibt den angezeigten Teil des Bildes an; die Viewbox wird ubersetzt und skaliert, um sich an die Breite und Hohe des Containers anzupassen.

Es gibt einige wertvolle Verwendungen von Bitmap-Bildern innerhalb von SVG-Dateien, wie z.B. das Kommentieren eines Fotos (z. B. Beschriftung der Teile in einem anatomischen Foto; die Beschriftungen konnen leicht ubersetzt werden), was das Beste aus beiden Welten vereint: Die Vektorisierung eines Fotos oder eines Raytrace-Bildes wurde grosse Dateien erzeugen, die unnaturlich und schlecht skaliert sind, wahrend das Rendern aller hinzugefugten Schriften und harten Kanten in eine reine Bitmap zu einem Detailverlust bei der Skalierung und zu Ringelungen an den Kanten fuhren wurde. Die meisten Verwendungen von Bitmaps in SVG-Dateien sind jedoch nicht notwendig und Bitmaps werden oft besser konvertiert oder als Vektoren neu gezeichnet. Bitmaps sollten in eine SVG-Datei aufgenommen werden, wenn dies aus irgendeinem Grund die beste Losung ist, sollten aber als Vektoren neu gezeichnet werden, wenn dies ein insgesamt besseres oder informativeres Bild ergibt. Ausserdem konnen andere Benutzer, die auf das Bild auf Commons stossen, die Vorlage {{BadSVG}} einem SVG-Bild hinzuzufugen, das unerwunschte rasterbasierte Elemente enthalt.

Bitte denke sorgfaltig uber die Verwendung von Bitmaps in SVG-Dateien nach und uberlege dir, ob du diese nicht direkt in eine Bitmap einfugen, sondern als Vektoren in ein Bild einbinden oder neu zeichnen solltest. Weitere Informationen zu diesem Thema findest du auf der Seite Diskussionsseite. Wenn du dich fur die Verwendung eines Bitmap-Bildes entscheidest, achte bitte darauf, das Bild einzubetten und nicht zu ihm zu verlinken, da es sonst nicht gerendert werden kann.

SVG-Bilder konnen animiert werden, aber da die SVG-Datei fur die Verwendung in Wikimedia-Projekten in das Raster-PNG-Format konvertiert wird, wird die Animation nur angezeigt, wenn die SVG-Datei in den Browser geladen wird. Auf einer Artikelseite bedeutet dies, dass man auf das Bild klickt, um zur File:-Seite zu gelangen, und dann auf dieses Bild klickt, um die SVG-Datei zu laden.

Die ursprungliche Methode zur Animation von SVG verwendet SMIL. Seit kurzem ist auch CSS-Animation verfugbar.

SMIL wird von immer weniger Browsern unterstutzt. Der Internet Explorer unterstutzt SMIL nicht; Google hat SMIL im Jahr 2015 als veraltet eingestuft, wobei die Moglichkeit besteht, dass SMIL in Zukunft vollstandig aus Google Chrome entfernt wird.^[17] Seit Juli 2018 ist die SVG-SMIL-Animation in den meisten Browsern ausser Internet Explorer, Edge und Opera verfugbar.^[18]

Siehe Tagging SVG files, um zu erfahren, wie man eine Datei als animiert markiert.

Das title-Element direkt unterhalb des SVG-Elements dient als Titel des SVG-Bildes selbst, kann aber auch weiter innerhalb der nachkommenden Elemente innerhalb des SVG-Bildes angewendet werden. In den meisten modernen Desktop-Browsern werden diese Titel in Popup-Fenstern Tooltips dargestellt, die dem Leser helfen, die Bedeutung des Objekts beim Mouse-Hoover zu erkennen, selbst wenn eine Textbeschriftung durch das Objekt vorhanden ist. In ahnlicher Weise kann der Titel auch auf Text angewendet werden, um die Nachricht einzuklappen, aber es kann eine gute Idee sein, einen Hinweis auf die Existenz des Titelelements zu geben, indem man Textverzierungen wie Unterstreichungen verwendet. XML-Kommentar eignet sich eher fur technische Informationen, die normalerweise nicht dem Leser angezeigt werden sollen, sondern anderen Benutzern, die den SVG-Quellcode bearbeiten konnen.

Derzeit konnen die meisten mobilen Browser von Haus aus keine Titelinhalte anzeigen, mit Ausnahme des einen Rechts unter dem SVG-Element, da es kein Aquivalent zum Schweben des Zeigers auf mobilen Geraten gibt.

Aus Sicherheitsgrunden akzeptiert MediaWiki keine SVG-Dateien, die z. B. die folgenden Muster enthalten:

Zur Bereinigung problematischer SVG-Dateien kannst du https://svgworkaroundbot.toolforge.org/ verwenden (santicize potenitally dangerous commands aktivieren), mehr dazu findest du unter User:JoKalliauer/IllegalSVGPattern.

Aufgrund begrenzter Fahigkeiten erkennt der XML-Parser die folgenden Muster nicht und blockiert sie:

Bevor fu die endgultige Version eines SVG-Bildes speicherst, solltes du alle Verweise auf andere Dateien entfernen, die du zur Erstellung der SVG-Datei verwendet hast (dies ist mit ,,Verlinkung" gemeint); wenn diese Verweise im SVG-Text belassen werden, findet das Rendering die externe(n) Datei(en) nicht und schlagt fehl. Wikimedia blockiert solche Uploads, so dass sie nicht mehr hochgeladen werden konnen.

Es ist auch eine gute Idee, unbenutzte Definitionen (defs) zu entfernen oder zu ,,vakuumieren", da diese die Grosse der Datei unnotig aufblahen konnen (ausser wenn du sie fur weitere Bearbeitungen benotigst, wie z.B. Standardvorlagen).

Es gibt drei gebrauchliche SVG-Optimierer: scour, svgcleaner und svgo, aber sei dir bewusst, dass alle drei Optimierer Dutzende von bekannten Fehlern haben und nicht mehr aktiv entwickelt werden ^[19][20][21], fur weitere Optimierungsoptionen und wie man sie verwendet siehe Verwenden von Optimierer.

Aber sei dir bewusst, dass das Aufraumen umstritten und oft unerwunscht ist, siehe Wann ist die Optimierung/Validierung von Dateien unerwunscht? fur Details und Grunde. Aufraumen oder Validieren rechtfertigt kein erneutes Hochladen^[22]. Ungultige Elemente und Attribute sind oft fur die korrekte Darstellung notwendig und sollten nicht entfernt werden^[23].

Inkscape und andere Programme ermoglichen es Benutzern auch, Dateien im SVGZ-Format (komprimiertes binares SVG) zu speichern. Dieses Format wird von Commons nicht unterstutzt und sollte nicht auf hier hochgeladene Bilder angewendet werden. Solche Bilder konnen nicht hochgeladen werden.

Beachte, dass es in Adobe Illustrator und Inkscape verschiedene Optionen zum Speichern gibt, siehe Help:Inkscape#Inkscape_SVG_vs._Plain_SVG und Help:Illustrator#How_to_save_as_an_Illustrator_SVG. In Inkscape gibt es drei mogliche svg-Optionen: ,,Inkscape SVG", ,,einfaches SVG" und ,,optimiertes SVG". Inkscape-SVG ist das beste Dateiformat, um die Datei in Inkscape neu zu bearbeiten, andernfalls werden Informationen wie Ebene oder Raster entfernt, solche Bilder sollten mit {{Created with Inkscape|IMPORTANT=yes}} gekennzeichnet werden, um zu zeigen, dass sie nicht optimiert werden sollten. Einfache SVGs werden identisch mit Inkscape-SVGs gerendert und sind etwas kleiner. Optimiertes SVG verwendet einen Optimierer namens scour, der die Dateigrosse noch weiter reduzieren kann und einige Workarounds fur librsvg-Fehler bietet, wie z.B. phab:T217990^[24].

Eine Reihe von freien Schriften, die auf dem Wikimedia-Server installiert sind, konnen mit dem Tag gerendert werden. Du kannst Beispielwiedergaben auf MetaWiki oder die Liste ansehen. Web fonts werden uberhaupt nicht unterstutzt. Einige Schriftarten sind nicht im regularen Stil verfugbar, sondern nur fett oder in anderen wie kursiv; ziehe Alternativen wie Liberation in Betracht. Bitte ziehe aus den folgenden Grunden in Erwagung, diese Schriftarten zu verwenden und Text nicht in Pfade zu konvertieren:

• Das Speichern als Schriftart und nicht als Pfade kann die Gesamtdateigrosse stark reduzieren, insbesondere wenn das Bild grosse Textmengen enthalt.
• Typografische oder grammatikalische Fehler in der Abbildung konnen von anderen Benutzer korrigiert werden, ohne dass der gesamte Text neu gezeichnet werden muss.
• Text kann in andere Sprachen fertig ubersetzt werden, ohne dass der lokalisierende Benutzer alle Textbeschriftungen neu positionieren muss; dies ist eine wichtige Eigenschaft, da Commons ein mehrsprachiges Projekt ist. Pfade erfordern viel mehr Arbeit bei der Ubersetzung. Siehe auch Template:Translate.
• Text kann leicht mit Suchmaschinen durchsucht werden, die moglicherweise keine Pfadumrisse erkennen.

Wenn Schriften in Pfade umgewandelt werden, kann es daruber hinaus zu Urheberrechtsproblemen kommen, wenn die Schrift unter keiner der akzeptierten freien Lizenzen steht. (Solche Vektorbilder werden derivative Werke der Schriftart). Siehe auch: WP:PD#Fonts and typefaces

SVG-Dateien, die Text nicht in Pfadform umwandeln sollen, konnen mit {{Path text SVG}} merkiert werden. Fur die Verknupfung von Text modifizierbar (was wir ,,Text" oder ,,Schrift" genannt haben) und Text nicht modifizierbar (d. h. pfadbasiert) einer SVG-Datei verwenden {{Vector text versions|...}}.

Wenn du aus Grunden wie der fehlenden Unterstutzung der Funktion textPath oder einer seltenen Glyphe, die in den meisten Schriften nicht vorhanden ist, dennoch auf der Konvertierung von Text in einen Pfad bestehst, solltest du die Gruppe des Rohtextes duplizieren, um den konvertierten Text zu uberlagern, und dieser Gruppe das Attribut fill-opacity="0" stroke-opacity="0" hinzufugen, um den Rohtext zu verbergen. Auf diese Weise kann der Text in der ursprunglichen SVG-Datei von Lesern immer noch manuell gesucht, angeklickt und hervorgehoben werden. opacity="0" kann zu Missverstandnissen fuhren, da es die Hervorhebung unsichtbar macht, obwohl sie noch auswahlbar ist. display="none" verhindert, dass Leser den Text durchsuchen konnen, ohne auf den Quellcode zuzugreifen.

Das Konvertieren von Text in eine Kontur (Pfad) vor dem SVG-Export ist besonders bei |Adobe Illustrator-Benutzern beliebt, da die Vektorgrafik-Software das Attribut text-align nicht in text-anchor umwandelt und die Fallback-Schriften auf Wikimedia andere Schriftmetriken haben als die vom Bildautor gewahlte Schrift. Dies fuhrt zu einer falschen Textpositionierung und ermutigt Benutzer, die Vorteile der Beibehaltung von Rohtext in der Vektordatei zu ignorieren.

Inkscape unterstutzt eine Funktion namens ,,Flowed Text", die Text automatisch umbricht, damit er in die Grenzen eines gegebenen Textrahmens passt. Leider ist diese Funktion Teil von SVG Tiny 1.2, das niemand unterstutzt. Seine Verwendung wird mit ziemlicher Sicherheit zu Kompatibilitatsproblemen fuhren.^[25] Bei Wikipedia wird ein fliessender Textrahmen uberhaupt nicht gerendert (phab:T43424 - je nach Schriftgrosse und Farbe).^[26]

Um dieses Problem in Inkscape zu vermeiden:

• Die einfachste Losung ist, nur einen einzigen Klick (ohne Ziehen) zu verwenden, um Text mit dem Textwerkzeug von Inkscape zu erstellen. (Wenn du dagegen die Maustaste gedruckt haltst und die Maus ziehst, um einen Textrahmen zu zeichnen, weise Inkscape ausdrucklich an, Fliesstext zu verwenden).

Es gibt jedoch einige einfache Moglichkeiten, dieses Problem zu beheben:

• Wenn du bereits ein Fliesstextfeld erstellt hast, kannst du es mit Text - Convert to Text^[27] in normalen Text umwandeln. (Uberprufe aber anschliessend die Textausrichtung, in etwa 15 % aller Falle^[28] verwenden, ubersetzen den Text oder andern die Textausrichtung.^[29])
• Wenn es einen Fliesstext gibt, der nur aus einer Zeile besteht (wie in mehr als 9 von 10 Fallen), kannst du ihn in jedem Texteditor in einen einfachen Text umwandeln (produziert genau das gleiche wie Inkscape), wenn du flowRegion durch einen -tag mit den x- und y-Koordinaten des Rechtecks ersetzen. Auf User:JoKalliauer/RepairFlowRoot#replace the flow-text by using (Text-Editor) findest du auch ein automatisches String-Edit-Skript^[30] heruntergeladen werden kann, das das fur dich erledigt.

Wenn du versehentlich ein Fliesstextfeld erstellt hast, das leer ist (d.h. keinen Text enthalt), ist es in Inkscape nicht sichtbar oder auswahlbar, aber es wird trotzdem als schwarzes Rechteck in Wikipedia angezeigt. Um es zu loschen, gibt es einige Moglichkeiten:

• Verwende den in Inkscape eingebauten XML-Editor (Bearbeiten - XML-Editor) und losche alle Fliesstextfelder (suche alle Knoten, die in der Baumansicht heissen).
• Verwende einen einfachen Texteditor (z. B. Notepad) und suche nach dem Text ,,flowRoot". Losche alle Fliesstextfelder manuell, inde du ihr offnendes XML-Tag (), ihr schliessendes XML-Tag () und den gesamten Text zwischen zwei ubereinstimmenden Tags entfernst.^[31]
• Um nur das unsichtbare Rechteck auszublenden, kannst du fill-opacity="0"^[32][33] zum fill-opacity="0"/>-Tag (oder im fill-opacity="0">-Tag) hinzufugen.

Die Skalierung von Schriften funktioniert derzeit nicht wie erwartet, wenn die horizontale und die vertikale Skalierung (gemass der effektiven Transformationsmatrix) nicht gleich sind (die horizontale Dehnung wird ignoriert: nur die aus der Matrix berechnete Schrifthohe wird derzeit beachtet); dies kann die korrekte Darstellung in schmalen/kondensierten oder breiten-erweiterten Stilen einer anderen Schriftart verhindern, wobei der Text eine unerwartete Breite annimmt und aus dem erwarteten Rahmen herausfliesst (die Alternative ist die Auswahl einer alternativen freien Schriftfamilie, die bereits schmal/kondensiert ist).

Text wird garantiert falsch platziert (und in einigen Fallen mit unschonem kerning), wenn die Auflosung des PNG-Renderings nicht mit der nativen Dimension ubereinstimmt, die durch die SVG-Datei selbst definiert ist, unabhangig davon, wie ,,regelmassig" der Skalierungsmultiplikator ist (z. B. 0,5, 2 oder 4)^[34] Verwende auf keinen Fall eine extrem kleine (>10px) oder grosse Schriftgrosse und skaliere dann den Text oder das gesamte Bild auf die gewunschte Grosse. Beginne immer mit einer vernunftigen Schriftgrosse (leider ist eine Grosse um 80px vorzuziehen)^[35]

Vorsicht auch bei Unterschieden in der Schriftmetrik: Eine SVG-Datei kann gut aussehen, wenn sie direkt in einem SVG-fahigen (alle modernen) Browser unter Windows oder Mac OS gerendert wird (der gangige, aber nicht freie Schriften wie Courier oder Courier New verwenden kann), sieht aber anders aus, wenn sie auf die Liste der freien Schriften beschrankt ist, die derzeit vom SVG-zu-PNG-Renderer von MediaWiki unterstutzt werden (oder wenn sie unter Betriebssystemen wie freien Linux-Distributionen betrachtet wird), siehe auch Abschnitt ,,Schriftsubstitution und Fallback-Schriften".

Das Attribut textLength wird nicht vollstandig unterstutzt und konnte nicht korrekt gerendert werden. Siehe phab:T15387.^[36]

RSVG erkennt die Eigenschaft writing-mode, aber es gibt Probleme mit einigen Schriftarten auf Commons (insbesondere mit der Standardschriftart). Die Tatsache, dass einige Schriftarten funktionieren, deutet darauf hin, dass das Problem eher bei der Schriftart als bei RSVG liegt. Das Problem ist, dass der vertikale Abstand dazu fuhrt, dass sich die Zeichen gegenseitig uberschreiben (phab:T65236). Die typische Art, vertikalen Text zu erzeugen, funktioniert zum Beispiel nicht:

Die Problemumgehung besteht darin, eine Schriftart anzugeben, die funktioniert, anstatt sich auf die chinesische Standardschriftart zu verlassen (die wahrscheinlich WenQuanYi Zen Hei ist). Geeignete Schriftarten sind Noto Sans CJK SC oder AR PL UKai TW oder monospace.

SVG-Schriftspezifikationen konnen eine bestimmte Schriftfamilie wie Arial oder Times New Roman verwenden. Eine solche Schriftartspezifikation bedeutet in der Regel, dass der User-Agent Zugriff auf die Schriftartdatei mit diesem Namen haben muss. Leider sind viele Schriftarten proprietar und nicht auf allen Betriebssystemen verfugbar. Zum Beispiel haben nicht alle Betriebssysteme die proprietare Schriftart Arial. Wenn die spezifische Schriftfamilie nicht verfugbar ist, wird eine Standardschriftart verwendet; die Standardschriftart kann ein ganz anderes Aussehen haben. Fur den User-Agent librsvg ist die Standardschriftart Liberation Serif.

Viele User-Agents verfugen uber eine Schriftersetzungstabelle, die es dem User-Agent ermoglicht, eine Schriftfamilie zu ersetzen, die ahnlich ist. Um die Ubereinstimmung der Schriften zu verbessern, erlaubt SVG font-family fur eine Liste von Schriftfamiliennamen; der User-Agent wird die erste Schriftfamilie verwenden, die er erkennt. Der Grafiker konnte ahnliche Microsoft-, Apple- und Unix-Schriften auflisten, um die Chance zu erhohen, dass der User-Agent die gewunschte Schrift hat. Zusatzlich unterstutzt SVG die CSS-Spezifikation generic font family.^[37][38] Das bedeutet, dass die meisten SVG-Useragents die generischen Schriftfamilien serif, sans-serif, cursive, fantasy und monospace unterstutzen. Es ist eine gute Praxis, eine generische Schriftfamilie als letzten Eintrag in der Schriftfamilienliste zu verwenden. Fur librsvg auf Commons gilt:

• sans-serif ist DejaVu Sans zugeordnet
• serif ist DejaVu Serif zugeordnet
• cursive ist der uninteressanten DejaVu Sans zugeordnet
• fantasy ist der uninteressanten DejaVu Sans zugeordnet
• monospace ist DejaVu Sans Mono zugeordnet

Auf Commons hat librsvg die in m:SVG_fonts#Latin_(basic)_fonts_comparison aufgefuhrten Schriften. Wenn du nur diese Schriften verwendest, erhaltst du gute Ergebnisse in Wikipedia-Artikeln, die ihre Bilder mit librsvg anzeigen, aber Grafiker sollten sich auch daruber im Klaren sein, dass SVG-Dateien von anderen User Agents angezeigt werden konnen. Daher ist es am besten, gangige Schriftfamilien (wie Arial) oder eine Liste von Schriftfamilien zu verwenden, die mit einer generischen Schriftfamilie endet (wie Trebuchet, sans-serif).

Die Schriftmetrik fur generische Schriftfamilien wie z. B. sans-serif wird wahrscheinlich auf verschiedenen User Agents stark variieren. In grafischen Darstellungen sind metrisch exakte Textelemente oft wichtig und Arial kann als De-facto-Standard fur ein solches Merkmal angesehen werden. Wenn du sowohl Arial als auch sans-serif als Fallback-Schriftarten hinzufugst, wird das SVG auf Rechnern, die nicht uber Arial verfugen oder diese ersetzen konnen, bestmoglich angezeigt werden. Um die SVG-Datei unabhangig von Arial zu machen, anderst du alle Vorkommen von font-family: Arial in font-family: 'Liberation Sans', Arial, sans-serif.

Wenn du nicht-westliche Schriftzeichen verwendest, solltest du diese Schriftarten vor Liberation Sans definieren. Wenn dein Text zum Beispiel chinesische Zeichen enthalt, sollte die Definition von font-family lauten: Liberation Sans, Arial, WenQuanYi Zen Hei, SimHei, sans-serif. In diesem Fall werden westliche Schriftarten vorangestellt, weil die Qualitat westlicher Schriftzeichen in chinesischen Schriftarten oft gering ist und wir die hoherwertigen zuerst verwenden wollen.

• Inkscape unterstutzt Fallback-Schriften ab Version 0.91.
• Adobe Illustrator Version 18.1.1 oder fruher (wahrscheinlich auch in spateren Versionen) unterstutzt keine Fallback-Schriften, so dass die SVG-Datei nach dem Speichern manuell in einem Texteditor aktualisiert werden muss.

Obwohl du nur das text-Element verwenden kannst, um einfachen Text im Bild darzustellen, kann das tspan-Element nutzlich sein, um Text zu handhaben, bei dem die Position des Wortes vom anderen abhangig ist. ^[40] Ein tspan-Element muss innerhalb des text-Elements verschachtelt werden, und dann konnen weitere tspan innerhalb dieses tspan verschachtelt werden, wobei alle im ubergeordneten text-Element definierten Formatierungen an die untergeordneten tspan-Elemente vererbt werden. Zum Beispiel:

Der Hauptunterschied zur ,,g Verschachtelung von text" ist, dass einige wichtige Text-Layout-Verhaltensweisen ausschliesslich fur tspan gelten: Wenn mehrere text-Elemente hintereinander aufgereiht werden, positionieren sie sich immer noch unabhangig voneinander; wenn mehrere tspan-Elemente hintereinander aufgereiht werden, aber dem zweiten und den folgenden tspan-Elementen keine absolute x-Koordinate gegeben wird, reiht sich der Text dieser tspan-Elemente horizontal direkt neben dem Ende des Zeichens des vorherigen 8 im selben text-Element ein.

tspan sollte jedoch sparsam verwendet werden, selbst wenn du die absolute x-Koordinate fur jedes einzelne tspan-Element im text-Element definierst. Das liegt daran, dass bei der Standarddefinition von xml:space jeder Zeilenumbruch (innerhalb von text oder tspan) mit einem zusatzlichen Leerzeichen am Ende automatisch in ein Leerzeichen umgewandelt wird.^[41] Wenn mehrere aufeinanderfolgende Zeilenumbruche vorkommen, werden sie als ein Leerzeichen behandelt. Dies ware kein Problem, wenn auf den Zeilenumbruch ein tspan-Element mit absoluter x-Koordinate folgt und links ausgerichtet ist (text-anchor=start, der Standardwert). Wenn xml:space der Wert 'preserve' ubergegeben wird, ubersetzt librsvg den Einzug in ein langes weisses Tab-Zeichen, das 8 Leerzeichen entspricht. Da die automatische Formatierung oder Neueinruckung (Einruckungsstil) der meisten XML-Editoren automatisch eine Einruckung fur jeden neuen XML-Tag erzeugt, solltest du die Neueinruckung vorsichtig verwenden, wenn deine SVG-Datei eine solche Verwendung von tspan enthalt.

Das Verhalten der verschiedenen SVG-Renderer zu diesem Problem variiert stark und ist in der Regel nicht mit der W3C-Spezifikation vereinbar (auch der 'preserve'-Wert von xml:space wird in SVG 2 veraltet sein.^[42]). Das einzige Problem mit librsvg ist, dass es den Zeilenumbruch allein nie in ein Leerzeichen umwandelt, egal welcher Wert von xml:space angegeben wird, wenn es kein abschliessendes Leerzeichen oder einen Einzug vor dem tspan-Tag gibt. Mit Ausnahme von librsvg fugen fast alle modernen Browser das umgewandelte Leerzeichen direkt nach dem vorangehenden Text ein. Das ist der Grund, warum die Werte end oder middle der 3-Eigenschaft den Text immer um 1 Leerzeichen nach links ausrichten, weil die neue Zeile und/oder der nachlaufende Tabulator oder das Leerzeichen nach dem schliessenden tspan-Tag in ein unerwartetes Leerzeichen umgewandelt wird.^[43]

Inkscape ist fehlerhaft bei der Darstellung von tspan, z.B. erbt es die text-anchor-Eigenschaft vom ersten tspan-Element falschlicherweise fur die nachfolgenden tspan-Elemente, selbst wenn die Eigenschaft in allen tspan-Elementen ausdrucklich mit einem Wert versehen ist.^[44] In einem solchen Fall kehre einfach die ,,text nestling tspan"-Struktur in die ,,g nestling text" um. Inkscape verwendet auch die Voreinstellung xml:space="preserve", um Leerzeichen zwischen tspan zu behandeln.

Wenn du ein SVG mit Adobe Illustrator erstellst, siehst du im Speicherdialog die Optionen ,,Weniger -Elemente ausgeben" und ,,-Element fur Text auf Pfad verwenden". Um die Konsistenz des Erscheinungsbildes deiner Schrift uber alle Browserplattformen hinweg zu maximieren, solltest du ein Hakchen bei der ersten Option setzen und sicherstellen, dass bei der zweiten Option kein Hakchen vorhanden ist. Wenn du dies nicht tust, kann das Kerning einiger Buchstaben dazu fuhren, dass sie sich uberlappen (abhangig von deinem Browser).

SVG 1.1 bietet keine Form von einem automatischen Zeilenumbruch (weder hart noch weich). Jeder Zeilenumbruch sollte manuell erfolgen, indem neue text- oder tspan-Elemente mit der gleichen absoluten x-Koordinate und einer neuen y-Koordinate positioniert werden. Fur tspan-Elemente kann die y-Koordinate der nachsten Zeile mit dem Attribut dy festgelegt werden. Obwohl textPath eine ahnliche Situation bewaltigen kann,^[45] dieses Element wird von librsvg/Wikimedia (phab:T11420) nicht unterstutzt.

In einem Entwurf von SVG 1.2 wurde der Zeilenumbruch zwar angesprochen, aber es gibt nur wenig Unterstutzung.

Der Entwurf von SVG 2.0 befasst sich auch mit dem Zeilenumbruch, aber Chrome, Firefox, Edge und librsvg unterstutzen ihn nicht (Stand: Mai 2018).

Normalerweise ist es einfach die kostenlose Verwendung des ,,style-Attributs". Um den Prozess der Aktualisierung der Schriftfamilie fur jedes Text- oder tspan-Element zu erleichtern, kannst du die CSS-Klasse(n) innerhalb von ,,style-Element" definieren und die class-Eigenschaft in Elementen wie folgt anwenden:

CSS-Klasse, die in ,,style-Element" definiert ist, kann auch fur andere SVG-Elemente (z. B. g und path) verwendet werden, obwohl das irrefuhrende Attribut type="text/css" fehlgeleitet ist. Auch wenn ein bestimmter Stil einmal im SVG definiert wird, wird es immer noch empfohlen, den Stil durch eine Klasse fur ein ordentlicheres Layout von XML-Codes zu ersetzen.

Entgegen der landlaufigen Meinung trennt das style-Attribut nicht zwischen Inhalt und Darstellung, und wenn du nicht die von einem CSS-Selektor gesetzten Eigenschaften ausser Kraft setzen musst, ist es am besten, stattdessen die SVG-Formatierungsattribute zu verwenden (z. B. statt ).^[46] Wenn du jedoch den im Element style definierten Elementstil ausser Kraft setzen willst, musst du das Attribut style verwenden. Wenn du den Stil fur das text-Element ohne style-Attribut uberschreiben musst, kannst du einen tspan-Element-Container verwenden, um den Text zu verschachteln, den du benotigen, um den Stil zu uberschreiben, vorausgesetzt, es gibt nichts Vordefiniertes in style-Element fur tspan-Element.

Hinweis

• phab:T68672 - CSS-Stilelemente werden ignoriert, wenn der Standardwert type="text/css" weggelassen wird.
• phab:T43423 - CSS Child-Selektoren werden von librsvg nicht unterstutzt.
• phab:T68551 - CSS-Klassen von text-Elementen werden nicht auf untergeordnete tspan-Elemente vererbt. Wenn du dies mochtest, musst du auch fur tspan eine separate Klasse hinzufugen oder einfach Gruppen verwenden (aber nicht im Textelement, wie es Scour leider tut).

Manchmal kann der Text unleserlich sein, weil die Hintergrundfarbe einen geringen Kontrast zur Schriftfarbe hat oder das Muster zu kompliziert ist und den Leser verwirrt. Dies kann gelost werden, indem man den Text an genau derselben Stelle dupliziert, aber den hinteren Text mit Strichen und den vorderen Text ohne Striche gerendert wie folgt:

• ,,stroke-linejoin:round" wird definiert, um scharfe Ecken des Textstrichs zu vermeiden.

Das Problem bei der Anwendung von Kontur und Fullung auf ein und dasselbe Textelement besteht darin, dass die Kontur ,,uber" den Haupttext gelegt wird, was ihn ansonsten unlesbar macht, wenn die Schrift zu klein ist, aber eine grossere Kontur benotigt, um sich vom Hintergrund abzuheben.

SVG-Filter konnen verwendet werden, um den Text uber eine vergrosserte Version des Textes zu zeichnen. Der Filter erweitert zunachst den Text, legt die Farbe des erweiterten Textes fest und zeichnet dann den ursprunglichen Text uber die erweiterte Version. Es kann ein Filter definiert werden, der von mehreren Textblocken verwendet werden kann:

id="textBack">
in="SourceAlpha" operator="dilate" radius="1" result="bloom" />
flood-color="white" flood-opacity="1" result="flback"/>
in="flback" in2="bloom" operator="in" result="surround" />

in="surround" />
in="SourceGraphic" />


x="10" y="50" filter="url(#textBack)">gibberish
x="10" y="70" filter="url(#textBack)">more gibberish

SVG-Filter konnen auch verwendet werden, um einen undurchsichtigen rechteckigen Hintergrund zu erstellen, der den Text umgibt. Die Verwendung eines Filters ist robuster als das Malen eines Rechtecks und das anschliessende Malen des Textes uber dieses Rechteck. Ein Rechteck mit fester Grosse passt moglicherweise nicht zur Schriftart, die fur den Text verwendet wird; auch die Grosse des Rechtecks musste angepasst werden, wenn sich der Text andert. Wenn der Text zum Beispiel ubersetzt wird, muss das Rechteck moglicherweise angepasst werden. Die Verwendung eines Filters passt die Grosse automatisch an.

id="rectBack" x="-2%" y="0%" width="104%" height="100%">
flood-color="white" flood-opacity="1" result="rect"/>

in="rect" />
in="SourceGraphic" />


x="10" y="50" filter="url(#rectBack)">gibberish
x="10" y="70" filter="url(#rectBack)">more gibberish

Das Konturieren von Text kann ohne Filter erfolgen, indem der Text zweimal explizit gerendert wird. Beim ersten Mal wird der Text mit einem weissen Strich gerendert, um die Kontur festzulegen. Durch die weisse Kontur wird der Text erodiert. Der Text wird ein zweites Mal gerendert, aber dieses Mal ist der Text nicht gestrichelt. Folglich werden die Zeichen in voller Grosse (ohne Erosion) wiedergegeben.

Wenn du viel Text hast, der mit einem Strichhintergrund dargestellt werden muss, kannst du den Text manuell in die Elemente , und einfugen. Wende den Strich auf das Element an, das darunter dargestellt wird, und dann die Textgruppe des Elements ohne Strich und fulle die Schrift mit einer Kontrastfarbe:

Das W3C hat die Eigenschaft paint-order in SVG 2.0 aufgenommen, die es ermoglicht, die Reihenfolge der Attribute ,,fill", ,,stroke" und ,,markers" innerhalb eines Elements manuell festzulegen, anstatt der standardmassig vorgeschriebenen Reihenfolge zu folgen.^[47] Mozilla Firefox enthalt dieses Attribut auch experimentell, aber es ist in der stabilen Version standardmassig deaktiviert, bis SVG 2.0 ausgereift ist. Diese Funktion kann in den about:config-Eintragen von Firefox aktiviert werden.^[48]

Benutzer von Inkscape Version 0.46 konnen feststellen, dass Bilder mit ,,Fullverlaufen" in Inkscape perfekt angezeigt werden, aber in Opera oder Firefox ,,unordentlich" dargestellt werden. Eine mogliche Ursache ist, dass die Deckkraft des letzten ,,Stopps" eines Farbverlaufs auf 0 gesetzt ist. Inkscape scheint diesen letzten Stopp zu ignorieren, aber sowohl Firefox 3.0.6 als auch Opera 9.36 zeigen ihn als weissen Rand im gefullten Objekt an. Die Losung besteht darin, entweder den letzten Stopp zu entfernen (da er wahrscheinlich irrtumlich erstellt wurde) oder die Deckkraft (und die Farbe) so zu andern, dass das Bild in den Browsern korrekt wiedergegeben wird.

Beachte, dass Inkscape ein JavaScript polyfill zu SVG-Bildern hinzufugt, die Netzverlaufe enthalten. Mit Skripten versehene SVG-Bilder konnen nicht auf Wikimedia Commons hochgeladen werden, aber durch das Entfernen des JavaScript-Codes werden die Farbverlaufe zerstort.

Benutzer von Adobe Illustrator CS5, CS6 oder CC, die auch Firefox verwenden, werden moglicherweise feststellen, dass ein Illustrator-,,Symbol", das einen Farbverlauf enthalt, normal als Commons PNG-Datei gerendert wird, aber wenn die SVG-Datei selbst in Firefox geoffnet wird, erscheinen diese Symbole leer. Andere Browser haben keine Schwierigkeiten - Google Chrome und sogar der Internet Explorer stellen die SVG-Symbolverlaufe von Illustrator korrekt dar, aber aufgrund eines bekannten Fehlers, der den Entwicklern von Firefox seit 2005 bekannt ist (Mozilla's Bugzilla Bug 376027 und andere Berichte, die dazu fuhren, wie z.B. Bug 353575), aber bisher nicht angemessen behoben werden konnte, zeigt Firefox solche Symbole als leere Formen an (Symbolstriche und Symbolpfade ohne Verlaufe sind davon nicht betroffen).

Adobe-Illustrator-Benutzer sollten auch beachten, dass alle Illustrator-,,Symbole", die Pfade mit einem Farbverlauf und einem Filter enthalten, nur bei der ersten Verwendung des Symbols als PNG in Commons gerendert werden. Bei spaterer Verwendung eines Symbols, das diese Pfade enthalt, werden die Pfade (aber nicht das gesamte Symbol) als leer dargestellt (weder Farbverlauf noch Filter noch Fullung oder Kontur werden angewendet).

Der SVG-Renderer von Wikimedia unterstutzt derzeit verschiedene Filtereffekte, aber einige Effekte wie gaussscher Weichzeichner (feGaussianBlur) verhalten sich anders, wenn das unscharfe Objekt den Rand des eigentlichen Bildes uberschreitet. Die aktuelle Version von RSVG behandelt die abgeschnittene Kante als die tatsachliche Kante des Objekts, um den Effekt anzuwenden (als ob das Objekt clipPath vor der Anwendung des Filtereffekts angewendet hatte), was einen unerwunschten Filtereffekt gegen die Bildkante erzeugt.

• Die maximale Dateigrosse auf Commons betragt 5 GiB (5.368.709.120 Byte) fur Benutzer von UploadWizard und anderen Tools, die Chunked Uploads unterstutzen. Obwohl grosse Dateien hochgeladen werden konnen, verursachen sie Probleme, wenn der Benutzer die Datei offnet.
• Die empfohlene Bildhohe betragt etwa 400-600 Pixel

Wenn die Datei zu gross ist, reduziere/optimiere sie:

• mit einem speziellen Programm
  • ein SVG-Optimierer, zu sehen in spezialisierte Anwendung
  • Inkscape, als optimierte svg-Datei speichern
• manuelle Bearbeitung der Datei
  • Manuelles Bereinigen des Codes^[49]
  • Editor und Regex, Beispiel
  • Erstellen von Gruppen
  • Reduzierung der Genauigkeit von Zahlen^[50][51]
  • Entfernung nicht benotigten Codes, z. B.:
    • alle nicht verwendeten Definitionen (defs), da diese die Grosse der Datei unnotig aufblasen konnen
    • Kommentare, Codeformatierung, Leerzeichen; aber es wird Code verschleiert (weniger lesbar) und es hat in der Regel vernachlassigbare Auswirkungen auf Dateigrosse und Renderingzeit.
• Bearbeitung des Programms (Skript) zur Erstellung der Datei und:
  • verwende weniger Punkte fur Kurven
  • verwende weniger Kurven

SVG Dateien konnen ubersetzt werden oder sie sind gleich mehrsprachig mit eingebetteten Ubersetzungen. Fur weitere Informationen siehe Commons:Translation possible/Mehr erfahren

Wenn die Bilddatei in einem anderen Format als SVG vorliegt gibt es verschiedene Wege, es nach SVG zu konvertieren. Siehe Converters fur Programme.

Hinweis: Bei Vektorbildern, bei denen die Vektorisierung von einer dritten Partei vorgenommen wurde, besteht das Problem, dass der Vektorisierungscode sein eigenes Urheberrecht haben kann, selbst wenn das abgebildete Bild selbst nicht urheberrechtlich geschutzt ist oder unter der Schwelle der Originalitat liegt. Siehe Urheberrecht fur weitere Informationen.

Im Allgemeinen gibt es drei Moglichkeiten, eine SVG-Datei aus einem vorhandenen Bild zu erstellen:

1. Neu generieren
2. Konvertieren
3. Erstellen einer neuen Datei

Wenn du ein Bild nicht selbst konvertieren kannst, fuge bitte den Tag {{Convert to SVG}} hinzu, um zu kennzeichnen, dass das Bild konvertiert werden soll. Einige Bilder eignen sich nicht gut fur SVG, vor allem Bilder mit kontinuierlichen Farbverlaufen wie Fotos. Diese sollten in der Regel als JPG gespeichert werden.

Wenn das Bild von einem Programm erzeugt (und nicht von Hand gezeichnet) wurde - z. B. ein Diagramm aus einer Tabellenkalkulation - kann es moglich sein, das Ausgabeformat auf SVG statt auf PNG oder ein anderes Format zu setzen und so ein SVG-Bild aus derselben Quelle zu erzeugen. Wenn moglich, ist dies in der Regel am einfachsten.

Viele Vektordateiformate lassen sich mit einem Konvertierungsprogramm leicht in SVG umwandeln, indem man einfach das Format andert (die vorhandenen Daten neu verpackt). Das kann so einfach sein wie das Offnen der Datei in einem Editor und das anschliessende Speichern im SVG-Format.

Bei Rastergrafiken (Bitmaps) ist das nicht moglich, weil das Bild aus einzelnen Pixelwerten und nicht aus Strichen (Vektoren) besteht. Fur diese Bilder (vor allem PNG-Bilder) kann man sie uber ,,Vektorisierung" oder ,,Tracing" in SVG umwandeln - dabei wird automatisch eine Vektorgrafik aus einem Rasterbild erzeugt.

Viele SVG-Editoren verfugen uber Tracing-Funktionen, und es gibt spezielle Konverter. In Inkscape wird dies durch das Programm Potrace erledigt.^[52][53] Konkret: Offne die Bitmap (Datei - Offnen... (Strg-O)) und wahle dann Pfad - Bitmap nachverfolgen... (Umschalt-Alt-B). Es gibt verschiedene Optionen; bitte losche nach der Verwendung die zugrunde liegende Bitmap und uberlege, ob du den Pfad vereinfachen kannst, um die Anzahl der Knoten zu reduzieren (Strg-L).

Adobe Illustrator ermoglicht auch die Umwandlung von Bitmap-Bildern in Vektoren uber seine Image Trace-Funktion. Dabei muss darauf geachtet werden, dass das resultierende Vektorbild weder unhandlich gross ist (was oft das Ergebnis einer zu starken Konvertierung in Bezug auf Farbe und Form ist), noch so einfach, dass es die Treue zum Originalbild verliert. Konvertierte Bilder mussen nach der Konvertierung fast immer manuell korrigiert werden. Wie in Inkscape sollte die zugrunde liegende Bitmap nach der Konvertierung entfernt werden.

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

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

Wenn ein Bild nicht regeneriert oder konvertiert werden kann, bleibt nur die Moglichkeit, es neu zu erstellen, d. h. ein neues SVG-Bild zu zeichnen, wobei das vorhandene Bild als Vorlage dient. Dies ist ein manueller Vorgang und die zeitaufwandigste Option, kann aber letztlich die beste Qualitat liefern.

In allen Fallen kann es sich als nutzlich erweisen, das resultierende Bild in einem SVG-Editor nachzubessern - vielleicht um Details hinzuzufugen, die im Ursprungsprogramm nur schwer oder gar nicht zu erzeugen sind, oder um eine komplexe Umwandlung zu vereinfachen oder zu verfeinern (wie z. B. die Vereinfachung eines durch 100 Punkte beschriebenen Pfades auf einen durch 5 Punkte beschriebenen Pfad, wenn zusatzliche Punkte unnotige Details hinzufugen).

Wenn du ein SVG-Bild erstellt hast, lade es (unter einem neuen Namen) hoch und kennzeichne das ursprungliche Rasterbild mit {{Vector version available}}, aber losche das Rasterbild bitte nicht oder kennzeichne es nicht zum Loschen, da es immer noch fur bestimmte Zwecke verwendet wird - siehe Commons:Superseded images policy fur Details.

Jede SVG-Datei, die auf Wikimedia Commons hochgeladen wird, sollte zeigen, wie sie erstellt wurde: Verwende die Vorlage {{Inkscape}}, {{Adobe}}, {{HandSVG}}, usw.

Du solltest das Aussehen und die Gultigkeit vor vor dem Hochladen uberprufen; verwende das Tool Commons SVG Checker

Wenn dich nicht sicher bist oder zuerst sehen willst, wie librsvg deine Datei rendert, lade sie in Test.svg hoch

Das Hochladen wird unter Commons:Erste Schritte/Dateien hochladen beschrieben.

Fulle {{Information}} so vollstandig wie moglich aus. Oft ist es hilfreich, wenn ein Bild ein vollstandiges Informationsfeld hat, da dies die Kategorisierung durch andere erleichtert und es anderen ermoglicht, Ubersetzungen vorzunehmen.

Ausfuhrliche Informationen zu SVG-Medien findest du im Abschnitt SVG software tags.

Alle SVG-Grafiken sollten in die entsprechende Unterkategorie oder Unterkategorien von Category:SVG files einsortiert werden. Bitte lege keine Bilder direkt in der ubergeordneten Kategorie ab, da diese sonst uberfullt und nutzlos wird (wir haben mehr als 100.000 SVG-Dateien).

Transcluded from Commons:SVG marker templates

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.

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

• {{Translate}}

• {{Translate|switch=yes}}

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

.

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

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

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

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

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

• {{BrokenSVG}}

• {{TracedSVG}}

• {{Path text SVG}}

• {{Superseded|Example.svg}}

• {{Technically replaced|SMW Logo.SVG}}

• {{Template image}}

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.

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!

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 x 9 pixels are too tiny, 3000 x 2000 are too large. The length of the shorter side of the PNG rendered by librsvg on Wikimedia is capped at 4.096 px (i.e. if width is shorter than height, the length cap of 4.096 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 4.096 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?

Do you really need to? Usually not! MediaWiki's renderer will convert the SVG file to PNG with a transparent white background for display (displays white if your browser doesn't support PNG transparencies). Browsers that natively support SVG transparency will show the background color through the image, white! (or grey if the image is displayed as a thumbnail). Leaving your image transparent behind helps future editors, and allows the image to be displayed over other background colors without a big white square. However, if your image really needs a specific colored background, create a rectangle the size of the image, fill it with the background color of your choice, and choose the command Object - Lower to Bottom. Save your image, and enjoy the solid background color!^[54]

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

• librsvg, a rendering library used by MediaWiki and the following viewers:
  • RSVG-view for UNIX, a small, simple viewer to preview how SVG files will look when rendered by MediaWiki
  • RSVG-view for Windows (same as above)
  • Commons:Commons SVG Checker, another librsvg-based rendered intended to find and report problems in SVG files
• Svg-explorer-extension, a free GPL extension for Windows Explorer that generates thumnails for SVG files
• iShell, a free MIT licensed extension for Windows Explorer that generates thumnails for SVG files
• SvgShellExtensions.dll, a free Boost licensed extension for Windows Explorer that generates thumnails for SVG files, based on Image32 graphics library by the same author
• SVG Shell Extensions, a free Apache licensed extension for Windows Explorer that generates thumnails for SVG files, based on the same library above, and includes a basic SVG code editor with live preview from its source code
• resvg, is one of the fastest and most correct SVG-render as of 2021,^[56] also provides additional packages with command utilities, as well as extension for Windows Explorer
• Inkview, part of Inkscape vector graphics editor, supports also Inkscape-specific features, which are not in the SVG-1.1-DTD-Standard
• IrfanView, an image viewer provides a plug-in for svg-rendering
• Imagine, another image viewer provides a plug-in for svg-rendering
• batik, a java-based toolkit with Squiggle SVG browser
• chrome-svgrender, renders SVG files using Headless Chrome
• SVG.NET, ein einfacher Renderer
• QtSVG, ein einfacher Renderer
• wxsvg, ein einfacher Renderer

• toolforge:convert, a PDF-to-SVG and SVG-to-PNG converter
• Autotrace ( Warning: these links have been usurped by a phishing site in the past), a library developed in 2004 by Martin Weber that the following tools use:
  • ImageMagick (home page), image-converter
  • autotracer.org, an online tracer that accepts JPEG, GIF and PNG files and outputs SVG, PDF, EPS, AI and DXF
  • Delineate, a free Java-based interface for Autotrace and Potrace (site link). Potrace is also integrated in Inkspace under the 'Path', 'Trace Bitmap' menu.
• 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, an open-source tool that converts SVG to PNG, PDF or PS
• Bitmap to SVG converter -- useful for converting pixel art
• svgexport, a Node.js module
• cairosvg, a Python library
• Vectorizer.AI, an artificial intelligence-based online tracer to convert raster image
• PDF24 Tools, including an online PDF-to-SVG converter

• Inkscape, a free and open-source SVG editor for Windows, macOS and Linux. See Hilfe:Inkscape for details.
• Sodipodi, a discontinued free and open-source SVG editor for Windows and Linux
• Apache OpenOffice Draw, a free and open-source drawing program that can export to SVG natively, and reads SVG with SVG Import Filter. It's a derivative of OpenOffice.org Draw.
• LibreOffice Draw, another derivative of OpenOffice.org Draw, can import and export to SVG. May be more suitable than Inkscape for special cases such as flow charts.
• Dia, a free and open-source diagraming app for Windows, macOS, and Unix-like (Currently has some bugs in SVG export)
• ConceptDraw DIAGRAM, a commercial diagraming app for Windows, macOS have the capability for SVG export
• OmniGraffle, a commercial diagraming app for macOS, iOS have the capability for SVG export
• Adobe Illustrator, a commercial (and very expensive) vector graphics editor with rich graphics features but limited SVG-specific capabilities. See Hilfe:Illustrator for details.
• Adobe Animate, another commercial (and very expensive) editor that can export to SVG with animations.
• Affinity Designer, a commercial (and very expensive) vector graphics editor by Serif Europe
• Google Drawings, an online diagraming app have the capability for SVG export
• CorelDraw
• Sketch
• Boxy SVG, an online editor with capabilities for both static and animated SVG.
• SVG-edit (on GitHub), a free and open-source Web app
  • toolforge:svgedit, an old copy of SVG-edit on Wikimedia Toolforge. See User talk:Rillke/SVGedit.js SS Is there a WYSIWYG editor for details.
• SVGedit.js, an experimental gadget native to Wikimedia Commons
• SVGator, an online editor for animated SVG. Free account provides limited features, advanced features requires purchase.
• SVG Anima, an online editor for animated SVG. Some advanced features requires purchase.
• Vector Paint -- a simple online editor useful for cropping. Note: cropping does not work properly with certain files.
• SVG Artista -- a simple online editor for animated SVG.
• Online SVG Code Editor -- a simple online editor for basic SVG code editing with live preview.
• PedanticSVG Editor -- an online SVG code editor with live preview and highlighting effect useful to analyze each SVG element.
• SVG Viewer -- an online SVG code editor with live preview, also has options for code reduction, and more.

• 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 (home page), 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 (alternative site) -- a web-based front-end for SVGO
• SvgPathEditor. An online editor useful for analyzing and improving SVG path data.
• SVG Path Visualizer. For analyzing SVG path data.
• SVG sanitizer -- a web-app that removes non-valid SVG code.

• Commons:Dateitypen#SVG
• Commons:Graphics village pump
• Commons:Graphic Lab
• Commons:Commons SVG Checker
• Commons:Translation possible/Learn more -- Wie man eine SVG-Datei ubersetzt
• Commons:Transition to SVG
• meta:SVG image support
• meta:SVG fonts -- Eine Liste der unterstutzten Schriftarten
• Wikipedia:Comparison of raster-to-vector conversion software
• Wikipedia: SVG-Hilfe
• Wikipedia: Graphics Lab/Resources/SVG
• Wikipedia:Graphics Lab/Resources/PDF conversion to SVG
• b:XML - Managing Data Exchange/SVG
• mw:Extension:TranslateSvg^[archiviert] und toolforge:svgtranslate - Hilfe bei der Ubersetzung von Textbeschriftungen in SVG-Dateien.
• User:Rillke/SVGedit.js - List the global variables for jsHint-Validation.

Wartung:

• Category:SVG
• Category:SVG maps -- Der SVG-Zweig des Kartenprojekts.
• Category:Images that should use vector graphics
• Category:Pictures showing a librsvg bug
• Commons:Transition to SVG

• SVG Primer
• openclipart.org bietet mehr als 10.000 SVG-Bilder (Public Domain)
• CanIUse.com
• SVG: Scalable Vector Graphics bietet Dokumentationen und Tutorials zu SVG

• Commons help/Translations
• SVG help/Translations
• Commons image resources/Translations