Hilfe:SVG

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

Offizielles Logo für das SVG-Dateiformat

SVG (skalierbare Vektorgrafiken) ist ein akzeptiertes Dateiformat auf Wikimedia Commons. Es eignet sich für Diagramme, Karten und andere nicht-fotografische Bilder. SVG wird auf Commons sehr geschätzt, weil es grafische Objekte mit Quellcode beschreibt und damit derzeit die beste Möglichkeit bietet, Inhalte zu modifizieren und zu verbessern.

SVG-Dateien werden auf Wikimedia Commons ausgiebig genutzt. Hier sind ein paar Tipps für den Anfang (wenn du bereits weißt, welches Programm du zur Erzeugung solcher Dateien verwenden wirst, solltest du zusätzlich zu den folgenden Programmen Hilfe:Illustrator oder Hilfe:Inkscape besuchen).

Was ist SVG

Ein Beispiel für ein SVG-Bild - beachte, dass die Kurven des Bildes, egal in welchem Maßstab du es betrachtest, immer glatt und niemals „gezackt“ erscheinen.

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 (binären) Format gespeichert, das wesentlich größeneffizienter ist als die meisten anderen Bildformate wie JPEGs oder GIFs. SVGs erlauben auch die Einbettung von Rastergrafiken und editierbarem Text.

librsvg

librsvg (alternativ „RSVG“) ist die Rendering-Bibliothek, die von MediaWiki verwendet wird, um die SVG-Dateien in das PNG-Bitmap-Format zu rastern, das für Wikimedia-Seiten verwendet wird. Das angezeigte Bild ist nicht SVG und ist daher nicht animiert oder interaktiv. Ein Grund für diese Wahl ist, dass das Rendern einer SVG-Datei in Echtzeit ältere Computer oder Betriebssysteme verlangsamt. Eine Rasterversion, die effizient aus der SVG-Quelle konvertiert werden kann, hilft, dieses technische Problem zu überwinden. Ein weiterer Grund ist, dass einige SVG-Dateien groß sind (z.B. 1 MB), aber das Bild bei der Anzeige auf einem Monitor möglicherweise 160&mal;320 Pixel beträgt, was unkomprimierte 51200 Pixel wären (153600 Byte bei 24-Bit-Farbe).

Seit Mai 2023 läuft auf Commons librsvg 2.44.10 (phab:T193352), das zum Zeitpunkt seiner Einführung bereits vier Jahre alt war. Dies ist eine frühe Version des librsvg-Rewrites in der Programmiersprache Rust. Obwohl es langjährige Probleme wie den mask-Bug behebt (phab:T55899) und erste Unterstützung für SVG 2.0 bietet, stehen uns einige Korrekturen der Upstream-Version aufgrund unserer alten Debian-Version nicht zur Verfügung. Siehe (phab:T265549) für die letzten Aktualisierungen.

Mehrere fehlende Funktionen und Fehler von librsvg wirken sich auf SVG-Bilder auf Commons aus. Folglich müssen SVG-Dateien diese Probleme vermeiden oder umgehen. Beispielsweise unterstützt librsvg die Funktion Text auf einem Pfad nicht, und librsvg hat Probleme mit Textzeichenfolgen von oben nach unten. Selbst wenn librsvg einwandfrei funktioniert, kann es Kompatibilitätsprobleme geben, wenn eine SVG-Datei eine Schriftart verwendet, die in Commons nicht vorhanden ist.

Eigenheiten

Stylesheet

Tracked in Phabricator
Task T68672
RESOLVED

In der SVG-Spezifikation wird das style-Element muss? standardmäßig mit seinem type-Attribut auf "text/css" gesetzt werden. [1] 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)

==== nicht angezeigter Text/Flusselemente ====(phab:T68672)

Siehe § Not displayed text (Flowed Text bug)

systemLanguage-Verarbeitung

Privatgebrauch langtag qcs zur Auswahl von zh-Hans.
Privatgebrauch langtag qct zur Auswahl von zh-Hant.

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 überein, daher ignoriert RSVG alle nachfolgenden Ländercode- 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.

IETF-Langtag SVG-Auszeichnung
sr-Cyrl systemLanguage="sr-Cyrl,qsc"
sr-Latn systemLanguage="sr-Latn,qsl"
zh-Hans systemLanguage="zh-Hans,qcs"
zh-Hant systemLanguage="zh-Hant,qct"

Das Attribut systemLanguage sollte eine Liste von IETF-Langtags sein. Es gibt einige Verwirrung über die richtigen Sprach-Tags. Für 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 wählt, wenn der Benutzer eine Spracheinstellung angegeben hat, die sr enthält. (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[2] bevorzugt die Verwendung von cmn. Ebenso bevorzugt die IETF statt zh-yue die Verwendung von yue für Kantonesisch. Die chinesische Schrift kann angegeben werden: Hans ist die vereinfachte Schrift und Hant ist die traditionelle Schrift. Welche Langzeichen für Chinesen 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 angehängt 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.

Für MediaWiki haben die serbischen Seiten eine gemeinsame Quelle, die entweder in kyrillischer oder lateinischer Schrift wiedergegeben werden kann. In ähnlicher Weise haben die chinesischen Seiten eine gemeinsame Quelle, die entweder in Hans oder Hant wiedergegeben werden kann. Im Idealfall könnte ein chinesischer Leser die Hans-Schrift wählen, und alle Bilder im Artikel würden ebenfalls in Hans gerendert werden. Der gewünschte Effekt wäre so etwas wie

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

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

Große Attribute

Die maximale Größe eines Attributs oder Textknoten eines SVG in MediaWiki beträgt 10 MB. Dies bedeutet, dass ein eingebettetes Rasterbild nicht größer als 6,9 MiB sein darf. Die Verwendung eingebetteter Rasterbilder wird nicht empfohlen.

SVG-Bilder für Wikimedia Commons erstellen

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

In den folgenden Abschnitten werden spezifische Merkmale von SVG erläutert.

Vor dem Hochladen: Validierung und Überprüfung des Erscheinungsbildes des Bildes

Validierung

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

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

Falls im SVG-Dokument zusätzliche Namensräume vorhanden sind, wird der Validator diese beanstanden. Viele Werkzeuge, wie Adobe Illustrator und Inkscape, fügen Knoten in zusätzliche Namensräume ein.

gemeinsames Präfix Namensraum Zweck
cc http://creativecommons.org/ns# Genehmigungen und Lizenzen
cdml http://www.freesoftware.fsf.org/bkchem/cdml Chemische Diagramme
dc http://purl.org/dc/elements/1.1/ Metadaten
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 Internationalisierung Tag Set
rdf http://www.w3.org/1999/02/22-rdf-syntax-ns# Format der Ressourcenbeschreibung
serif http://www.serif.com/ Serif Affinity (wird für Objektnamen verwendet, die nicht im Standardattribut id gespeichert werden können, weil sie unpassende Zeichen wie Leerzeichen enthalten)
sodipodi http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd Grafiken
svg http://www.w3.org/2000/svg SVG
xlink http://www.w3.org/1999/xlink XML-Verknüpfungssprache

Wenn der W3C-Validator eine Datei erhält, 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 über die Dropdown-Box UI verfügbar ist). Diese Validierung wird von einem zweiten, moderneren Validator durchgeführt, dem nu-Validator (https://validator.w3.org/nu). Darüber hinaus gibt die Validierung keine Fehler für die rdf Namespace-Elementbäume aus und verwendet Schemata zur Überprüfung der inkscape und sodipodi-Namensräume. DieSVG 1.1+XHTML+MathML 3.0-Validierung wird von {{ValidSVG}} verwendet.

Andere Namensräume verursachen weiterhin Validierungsfehler. Der W3C nu-Validator kann angewiesen werden, Fehler über andere Namensräume mit dem nsfilter-Parameter.[7] zu unterdrücken.

Darüber hinaus führen Nicht-SVG 1.1-Attribute zu Validierungsfehlern. Der SVG 2.0-Entwurf erlaubt es Benutzern, wie in HTML 5.0 beliebige data-*-Attribute einzufügen, aber der W3C-Validator wird sich darüber beschweren.

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

Bilderscheinung

Verschiedene Softwareprogramme und verschiedene Browser-Plattformen können die exakt gleiche SVG-Datei auf leicht unterschiedliche Weise darstellen. Die Art und Weise, wie du dein endgültiges Bild in einem Vektor-Bildeditor siehst, spiegelt möglicherweise nicht wider, wie dieses Bild aussehen wird, wenn es in Commons hochgeladen und von anderen betrachtet wird. Außerdem 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 endgültige Bild aussieht. Ein Beispiel für Ersteres: Bei einem Bild, das eine Reihe sehr feiner Striche enthält, 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 öffnen, um zu überprüfen, ob es wie beabsichtigt gerendert wird. Eine ähnliche Überprüfung kann auch durch Öffnen der Datei in anderen Bildbearbeitungsprogrammen durchgeführt werden.

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

Die Gründe, warum ein und dieselbe Datei je nach Kontext unterschiedlich dargestellt wird, sind darauf zurückzuführen, 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 unabhängig vom verwendeten Browser korrekt gerendert wird, und gehe niemals davon aus, dass dein eigenes Bildbearbeitungsprogramm dir zeigt, wie das Bild für 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 einzufügen, 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 einschließt, und dass du vor dem Hochladen der SVG-Datei in Commons prüfen 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 Füllung angewendet wird, einschließlich 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“ enthält — z. B. eine Fischaugenverzerrung und eine Freihandverzerrung. Illustrator kann nicht mit zwei dieser Effekte im Menü „Darstellung“ eines einzelnen Pfades umgehen und rastert sie.
  • Jeder Pfad, der mit einer Envelope-Verzerrung verändert wurde. Du kannst diese manchmal auf die gleiche Weise umgehen wie das oben erwähnte Musterproblem, aber die Ergebnisse sind in der Regel enttäuschend.
  • Jeder Pfad, dem im Menü Effekte der Effekt Raster zugewiesen wurde. Um diese als Vektoren beizubehalten, musst du diesen Effekt eventuell nur rückgängig machen.
  • Mit Illustrator können Benutzer auf drei Arten Verläufe auf Striche anwenden: Verläufe „innerhalb“ der Striche, Verläufe „entlang“ der Striche und Verläufe „über“ der Striche. Allerdings wird nur die erste dieser Möglichkeiten, Verläufe „innerhalb“ der Striche, von einem äquivalenten SVG-Code unterstützt; alle Striche, die Verläufe entlang oder über 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 können, desto wahrscheinlicher ist es, dass Illustrator sie als Vektoren beibehalten kann.

Für weitere Informationen darüber, wie SVG-Dateien für MediaWiki geprüft werden können siehe § How SVG files work in MediaWiki.

Document declaration

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

Der Quellcode jeder SVG-Datei sollte? mit der XML-Verarbeitungsanweisung [8] beginnen. Die XML-Verarbeitungsanweisung gibt die Version von XML und den Zeichensatz an.[9] Das W3C besteht darauf, dass Zeichenkodierungsdeklaration verwendet werden sollte?,[10] (der W3C-Validator warnt nur vor seinem Fehlen). Die Software, mit der du die SVG-Datei erstellst oder bearbeitest, sollte die Möglichkeit bieten, die Zeichenkodierung zu wählen. UTF-8 ist empfohlen? für die Internationalisierung im Gegensatz zu ANSI oder andere Unicode-Kodierungen als UTF-8. Das Fehlen der XML-Deklaration führt zu einer leichten Verwirrung, wenn die SVG-Quelldatei auf einem Wikimedia-Server in einem Browser geöffnet wird: der rohe XML-Code wird angezeigt anstatt als Bild gerendert zu werden. Dies ist kein Problem, wenn du die SVG-Quelldatei auf deinem Gerät herunterlädst und lokal öffnest.

Eine DOCTYPE-Deklaration mit ihrer DTD wird nicht benötigt und es wird offiziell nicht empfohlen, eine DTD zu verwenden,[5] 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 zusätzlichen Elemente und Attribute auf, die Inkscape in seine SVG-Ausgabe mit einschließt. Wikimedia-Server schränken auch ein, was in die interne Teilmenge einer DTD aufgenommen werden kann, so dass es nicht mehr möglich ist, die SVG-DTD um zusätzliche Elemente und Attribute zu erweitern.

Es sollte das Wurzelelement svg folgen. Es muss? den XML namespace für SVG angeben, xmlns="http://www.w3.org/2000/svg";[11] ohne den SVG-Namensraum wird ein SVG-Bild nicht gerendert. (Der Standard-Namensraum wird mit xmlns angegeben.) Andere Namensräume können im Element svg enthalten sein. Wenn die Datei beispielsweise Verlinkung verwendet, [12] dann sollte der xlink Namensraum xmlns:xlink="http://www.w3.org/1999/xlink" deklariert werden. Die SVG version-Nummer sollte? enthalten sein (typischerweise 1.1). Software liefert normalerweise diese Namensraumdeklarationen und kann andere Namensräume enthalten.

Die Standardwerte für die Attribute height und height sind "100%"; diese Standardwerte erlauben eine automatische Skalierung. Ein Bild, das width="400px" angibt, erklärt, dass es in einer Größe von 400 Pixeln angezeigt werden möchte, anstatt seinen Container sauber zu füllen. Leider geben viele Software-Tools eine feste Größe für diese Attribute an. Das Element svg sollte ein viewBox[13] Attribut angeben. Die Viewbox gibt den angezeigten Teil des Bildes an; die Viewbox wird übersetzt und skaliert, um sich an die Breite und Höhe des Containers anzupassen.

Bitmaps

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 können leicht übersetzt werden), was das Beste aus beiden Welten vereint: Die Vektorisierung eines Fotos oder eines Raytrace-Bildes würde große Dateien erzeugen, die unnatürlich und schlecht skaliert sind, während das Rendern aller hinzugefügten Schriften und harten Kanten in eine reine Bitmap zu einem Detailverlust bei der Skalierung und zu Ringelungen an den Kanten führen würde. 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 Lösung ist, sollten aber als Vektoren neu gezeichnet werden, wenn dies ein insgesamt besseres oder informativeres Bild ergibt. Außerdem können andere Benutzer, die auf das Bild auf Commons stoßen, beschließen, den Tag {{BadSVG}} auf ein SVG-Bild anzuwenden, das unerwünschte rasterbasierte Elemente enthält.

Bitte denke sorgfältig über die Verwendung von Bitmaps in SVG-Dateien nach und überlege dir, ob du diese nicht direkt in eine Bitmap einfügen, 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 für 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.

Animation

SVG-Bilder können animiert werden, aber da die SVG-Datei für 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 ursprüngliche Methode zur Animation von SVG verwendet SMIL. Seit kurzem ist auch CSS-Animation verfügbar.

SMIL wird von immer weniger Browsern unterstützt. Der Internet Explorer unterstützte es nicht; Google hat SMIL im Jahr 2015 als veraltet erklärt und SMIL in Zukunft vollständig aus Google Chrome zu entfernen.[14] Seit Juli 2018 ist die SVG-SMIL-Animation in den meisten Browsern außer Internet Explorer, Edge und Opera verfügbar.[15]

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

Titel

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 ähnlicher 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 für technische Informationen, die normalerweise nicht dem Leser angezeigt werden sollen, sondern anderen Benutzern, die den SVG-Quellcode bearbeiten können.

Derzeit können die meisten mobilen Browser von Haus aus keine Titelinhalte anzeigen, mit Ausnahme des einen Rechts unter dem SVG-Element, da es kein Äquivalent zum Schweben des Zeigers auf mobilen Geräten gibt. 

<?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 des gesamten SVG-Bildes</title>
	<g id="shapes">
		<title>Titel der Gruppe „shapes“</title>
		<rect x="0" y="0" width="10" height="20" fill="#f00">
			<title>Titel des Rechtecks</title><!--XML comment-->
		</rect>
		<circle cx="5" cy="5" r="3" fill="#0f0"/>
		<text x="2" y="30" text-decoration="underline">Text
			<title>Titel des Textes</title>
		</text>
	</g>
</svg>

Gesperrte Elemente und Scripting

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

<!--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=""

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 Fähigkeiten erkennt der XML-Parser die folgenden Muster nicht und blockiert sie: 

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

Bevor fu die endgültige 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 schlägt fehl. Wikimedia blockiert solche Uploads, so dass sie nicht mehr hochgeladen werden können.

Aufräumen

Es ist auch eine gute Idee, unbenutzte Definitionen (defs) zu entfernen oder zu „vakuumieren“, da diese die Größe der Datei unnötig aufblähen können (außer wenn du sie für weitere Bearbeitungen benötigst, wie z.B. Standardvorlagen).

Es gibt drei gebräuchliche 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 [16][17][18], für weitere Optimierungsoptionen und wie man sie verwendet siehe Verwenden von Optimierer.

Aber sei dir bewusst, dass das Aufräumen umstritten und oft unerwünscht ist, siehe Wann ist die Optimierung/Validierung von Dateien unerwünscht? für Details und Gründe. Aufräumen oder Validieren rechtfertigt kein erneutes Hochladen[19]. Ungültige Elemente und Attribute sind oft für die korrekte Darstellung notwendig und sollten nicht entfernt werden[20].

Einfache SVG, komprimierte SVG, generische Spezifikationen

Inkscape und andere Programme ermöglichen es Benutzern auch, Dateien im SVGZ-Format (komprimiertes binäres SVG) zu speichern. Dieses Format wird von Commons nicht unterstützt und sollte nicht auf hier hochgeladene Bilder angewendet werden. Solche Bilder können 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 mögliche 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 Dateigröße noch weiter reduzieren kann und einige Workarounds für librsvg-Fehler bietet, wie z.B. phab:T217990[21].

Schriftarten, Texte

Shortcut

Eine Reihe von freien Schriften, die auf dem Wikimedia-Server installiert sind, können mit dem Tag <text> gerendert werden. Du kannst Beispielwiedergaben auf MetaWiki oder die Liste ansehen. Web fonts werden überhaupt nicht unterstützt. Einige Schriftarten sind nicht im regulären Stil verfügbar, sondern nur fett oder in anderen wie kursiv; ziehe Alternativen wie Liberation in Betracht. Bitte ziehe aus den folgenden Gründen in Erwägung, diese Schriftarten zu verwenden und Text nicht in Pfade zu konvertieren:

  • Das Speichern als Schriftart und nicht als Pfade kann die Gesamtdateigröße stark reduzieren, insbesondere wenn das Bild große Textmengen enthält.
  • Typografische oder grammatikalische Fehler in der Abbildung können von anderen Benutzer korrigiert werden, ohne dass der gesamte Text neu gezeichnet werden muss.
  • Text kann in andere Sprachen fertig übersetzt 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 Übersetzung. Siehe auch Template:Translate.
  • Text kann leicht mit Suchmaschinen durchsucht werden, die möglicherweise keine Pfadumrisse erkennen.

Wenn Schriften in Pfade umgewandelt werden, kann es darüber 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, können mit {{Path text SVG}} merkiert werden. Für die Verknüpfung von Text modifizierbar (was wir „Text“ oder „Schrift“ genannt haben) und Text nicht modifizierbar (d. h. pfadbasiert) einer SVG-Datei verwenden {{Vector text versions|…}}.

Demonstration der grundlegenden Schritte zur Erhaltung des Textes vor der Konvertierung in einen Pfad in Inkscape, damit der Text auswählbar (beim Öffnen in Echtzeit im Browser) und durchsuchbar (durch eine Suchmaschine wie Google) bleiben kann.

Wenn du aus Gründen wie der fehlenden Unterstützung 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 überlagern, und dieser Gruppe das Attribut fill-opacity="0" stroke-opacity="0" hinzufügen, um den Rohtext zu verbergen. Auf diese Weise kann der Text in der ursprünglichen SVG-Datei von Lesern immer noch manuell gesucht, angeklickt und hervorgehoben werden. opacity="0" kann zu Missverständnissen führen, da es die Hervorhebung unsichtbar macht, obwohl sie noch auswählbar ist. display="none" verhindert, dass Leser den Text durchsuchen können, 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 gewählte Schrift. Dies führt zu einer falschen Textpositionierung und ermutigt Benutzer, die Vorteile der Beibehaltung von Rohtext in der Vektordatei zu ignorieren.

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

Nicht angezeigter Text (Fließtextfehler)

See also: § Line wrap.

Inkscape unterstützt 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 unterstützt. Seine Verwendung wird mit ziemlicher Sicherheit zu Kompatibilitätsproblemen führen.[22] Bei Wikipedia wird ein fließender Textrahmen überhaupt nicht gerendert (phab:T43424 - je nach Schriftgröße und Farbe).[23]

Um dieses Problem in Inkscape zu vermeiden:

  • Die einfachste Lösung ist, nur einen einzigen Klick (ohne Ziehen) zu verwenden, um Text mit dem Textwerkzeug von Inkscape zu erstellen. (Wenn du dagegen die Maustaste gedrückt hältst und die Maus ziehst, um einen Textrahmen zu zeichnen, weise Inkscape ausdrücklich an, Fließtext zu verwenden).

Es gibt jedoch einige einfache Möglichkeiten, dieses Problem zu beheben:

  • Wenn du bereits ein Fließtextfeld erstellt hast, kannst du es mit Text → Convert to Text[24] in normalen Text umwandeln. (Überprüfe aber anschließend die Textausrichtung, in etwa 15 % aller Fälle[25] verwenden, übersetzen den Text oder ändern die Textausrichtung.[26])
  • Wenn es einen Fließtext gibt, der nur aus einer Zeile besteht (wie in mehr als 9 von 10 Fällen), kannst du ihn in jedem Texteditor in einen einfachen Text umwandeln (produziert genau das gleiche wie Inkscape), wenn du flowRegion durch einen `<text x=".." y="..">-tag mit den x- und y-Koordinaten des Rechtecks ersetzen. Auf User:JoKalliauer/RepairFlowRoot#replace_the_flow-text_by_<text>_using_(Text-Editor) findest du auch ein automatisches String-Edit-Skript[27] heruntergeladen werden kann, das das für dich erledigt.

Wenn du versehentlich ein Fließtextfeld erstellt hast, das leer ist (d.h. keinen Text enthält), ist es in Inkscape nicht sichtbar oder auswählbar, aber es wird trotzdem als schwarzes Rechteck in Wikipedia angezeigt. Um es zu löschen, gibt es einige Möglichkeiten:

  • Verwende den in Inkscape eingebauten XML-Editor (Bearbeiten → XML-Editor) und lösche alle Fließtextfelder (suche alle Knoten, die in der Baumansicht <svg:flowRoot id="flowRootXXXX"> heißen).
  • Verwende einen einfachen Texteditor (z. B. Notepad) und suche nach dem Text „flowRoot“. Lösche alle Fließtextfelder manuell, inde du ihr öffnendes XML-Tag (<flowRoot ...>), ihr schließendes XML-Tag (</flowRoot>) und den gesamten Text zwischen zwei übereinstimmenden Tags entfernst.[28]
  • Um nur das unsichtbare Rechteck auszublenden, kannst du fill-opacity="0"[29][30] zum <rect … fill-opacity="0"/>-Tag (oder im <path d="…" fill-opacity="0">-Tag) hinzufügen.

Einschränkungen der Texttransformation

Vergleich von SVG-Rohtext-Rendering und in Pfad konvertiertem Text

Die Skalierung von Schriften funktioniert derzeit nicht wie erwartet, wenn die horizontale und die vertikale Skalierung (gemäß der effektiven Transformationsmatrix) nicht gleich sind (die horizontale Dehnung wird ignoriert: nur die aus der Matrix berechnete Schrifthöhe 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 herausfließt (die Alternative ist die Auswahl einer alternativen freien Schriftfamilie, die bereits schmal/kondensiert ist).

Text wird garantiert falsch platziert (und in einigen Fällen mit unschönem kerning), wenn die Auflösung des PNG-Renderings nicht mit der nativen Dimension übereinstimmt, die durch die SVG-Datei selbst definiert ist, unabhängig davon, wie „regelmäßig“ der Skalierungsmultiplikator ist (z. B. 0,5, 2 oder 4) (phab:T36947). [31] Verwende auf keinen Fall eine extrem kleine (>10px) oder große Schriftgröße und skaliere dann den Text oder das gesamte Bild auf die gewünschte Größe. Beginne immer mit einer vernünftigen Schriftgröße (leider ist eine Größe um 80px vorzuziehen).[32]

Vorsicht auch bei Unterschieden in der Schriftmetrik: Eine SVG-Datei kann gut aussehen, wenn sie direkt in einem SVG-fähigen (alle modernen) Browser unter Windows oder Mac OS gerendert wird (der gängige, aber nicht freie Schriften wie Courier oder Courier New verwenden kann), sieht aber anders aus, wenn sie auf die Liste der freien Schriften beschränkt ist, die derzeit vom SVG-zu-PNG-Renderer von MediaWiki unterstützt werden (oder wenn sie unter Betriebssystemen wie freien Linux-Distributionen betrachtet wird), siehe auch Abschnitt „Schriftsubstitution und Fallback-Schriften“.

Das Attribut textLength wird nicht vollständig unterstützt und könnte nicht korrekt gerendert werden. Siehe phab:T15387.[33]

Begrenzung des Schreibmodus

Die Testfälle für den Schreibmodus von oben nach unten, die zeigen, dass er mit einigen, aber nicht allen chinesischen Schriftarten funktioniert.

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 führt, dass sich die Zeichen gegenseitig überschreiben (phab:T65236). Die typische Art, vertikalen Text zu erzeugen, funktioniert zum Beispiel nicht: 

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

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.


Schriftersetzung und Fallback-Schriften

Wie die Fallback-Schriften gerendert werden.

SVG-Schriftspezifikationen können 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 proprietär und nicht auf allen Betriebssystemen verfügbar. Zum Beispiel haben nicht alle Betriebssysteme die proprietäre Schriftart Arial. Wenn die spezifische Schriftfamilie nicht verfügbar ist, wird eine Standardschriftart verwendet; die Standardschriftart kann ein ganz anderes Aussehen haben. Für den User-Agent librsvg ist die Standardschriftart Liberation Serif.

Viele User-Agents verfügen über eine Schriftersetzungstabelle, die es dem User-Agent ermöglicht, eine Schriftfamilie zu ersetzen, die ähnlich ist. Um die Übereinstimmung der Schriften zu verbessern, erlaubt SVG font-family für eine Liste von Schriftfamiliennamen; der User-Agent wird die erste Schriftfamilie verwenden, die er erkennt. Der Grafiker könnte ähnliche Microsoft-, Apple- und Unix-Schriften auflisten, um die Chance zu erhöhen, dass der User-Agent die gewünschte Schrift hat. Zusätzlich unterstützt SVG die CSS-Spezifikation generic font family.[34][35] Das bedeutet, dass die meisten SVG-Benutzeragenten die generischen Schriftfamilien serif, sans-serif, cursive, fantasy und monospace unterstützen sollten. Es ist eine gute Praxis, eine generische Schriftfamilie als letzten Eintrag in der Schriftfamilienliste zu verwenden. Für 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 aufgeführten Schriften. Wenn du nur diese Schriften verwendest, erhältst du gute Ergebnisse in Wikipedia-Artikeln, die ihre Bilder mit librsvg anzeigen, aber Grafiker sollten sich auch darüber im Klaren sein, dass SVG-Dateien von anderen User Agents angezeigt werden können. Daher ist es am besten, gängige Schriftfamilien (wie Arial) oder eine Liste von Schriftfamilien zu verwenden, die mit einer generischen Schriftfamilie endet (wie Trebuchet, sans-serif).

Die Schriftmetrik für 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 für ein solches Merkmal angesehen werden. Wenn du sowohl Arial als auch sans-serif als Fallback-Schriftarten hinzufügst, wird das SVG auf Rechnern, die nicht über Arial verfügen oder diese ersetzen können, bestmöglich angezeigt werden. Um die SVG-Datei unabhängig von Arial zu machen, änderst 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 enthält, 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 Qualität westlicher Schriftzeichen in chinesischen Schriftarten oft gering ist und wir die höherwertigen zuerst verwenden wollen.

  • Inkscape unterstützt Fallback-Schriften ab Version 0.91.
  • Adobe Illustrator Version 18.1.1 oder früher (wahrscheinlich auch in späteren Versionen) unterstützt keine Fallback-Schriften, so dass die SVG-Datei nach dem Speichern manuell in einem Texteditor aktualisiert werden muss.
gewünschte Schriftart Fallback im Wiki eine mögliche Fallback-Definition, die ähnlich aussehen wird (funktioniert auf Wikimedia/Windows/Linux/Mac)
[-keine Definition-] Liberation Serif
serif DejaVu Serif[36] font-family="serif"
Times New Roman Liberation Serif font-family="Liberation Serif,Times New Roman,Times,Times-Roman,serif"
sans-serif DejaVu Sans[36] font-family="sans-serif"
Arial Liberation Sans font-family="Liberation Sans,Arial,Nimbus Sans L,Helvetica,sans-serif"
Helvetica Nimbus Sans L font-family="Nimbus Sans L,Ubuntu,Liberation Sans,Helvetica,Arial,sans-serif"
Calibri font-family="Liberation Sans,Carlito,Calibri,Segoe UI,Myriad,UnDotum,Optima,Tahoma,Arial,sans-serif"
monospace DejaVu Sans Mono font-family="monospace"
Courier New Liberation Mono font-family="Liberation Mono,Courier New,Courier,monospace"
[-alles unbekannt-] DejaVu Sans


Layout mit Text- und tspan-Elementen

Obwohl du nur das text-Element verwenden kannst, um einfachen Text im Bild darzustellen, kann das tspan-Element nützlich sein, um Text zu handhaben, bei dem die Position des Wortes vom anderen abhängig ist. [37] Ein tspan-Element muss innerhalb des text-Elements verschachtelt werden, und dann können weitere tspan innerhalb dieses tspan verschachtelt werden, wobei alle im übergeordneten text-Element definierten Formatierungen an die untergeordneten tspan-Elemente vererbt werden. Zum Beispiel: 

<g font-size="12px">
  <text font-weight="bold" x="10" y="10">Wikipedia beherbergt Wissen
    <tspan fill="blue"> beigetragen
      <tspan text-anchor="end" dy="12"> von Freiwilligen</tspan>
    </tspan>
  </text>
  <text font-style="italic" x="15" y="30">Wikimedia Commons stellt kostenlose Mediendateien für alle Schwesterprojekte zur Verfügung.</text>
</g>

Der Hauptunterschied zur „g Verschachtelung von text“ ist, dass einige wichtige Text-Layout-Verhaltensweisen ausschließlich für tspan gelten: Wenn mehrere text-Elemente hintereinander aufgereiht werden, positionieren sie sich immer noch unabhängig 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 tspan im selben text-Element ein.

tspan sollte jedoch sparsam verwendet werden, selbst wenn du die absolute x-Koordinate für 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 zusätzlichen Leerzeichen am Ende automatisch in ein Leerzeichen umgewandelt wird.[38] Wenn es mehrere aufeinanderfolgende Zeilenumbrüche gibt, werden sie dennoch als ein Leerzeichen behandelt. Dies wäre 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' gegeben wird, übersetzt librsvg den Einzug in ein langes weißes Tab-Zeichen, das 8 Leerzeichen entspricht. Da die automatische Formatierung oder Neueinrückung (Einrückungsstil) der meisten XML-Editoren automatisch eine Einrückung für jeden neuen XML-Tag erzeugt, solltest du die Neueinrückung vorsichtig verwenden, wenn deine SVG-Datei eine solche Verwendung von tspan enthält.

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[39]). 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 abschließendes Leerzeichen oder einen Einzug vor dem tspan Tag gibt. Mit Ausnahme von librsvg fügen fast alle modernen Browser das umgewandelte Leerzeichen direkt nach dem vorangehenden Text ein. Das ist der Grund, warum die Werte end oder middle der text-anchor-Eigenschaft den Text immer um 1 Leerzeichen nach links ausrichten, weil die neue Zeile und/oder der nachlaufende Tabulator oder das Leerzeichen nach dem schließenden tspan-Tag in ein unerwartetes Leerzeichen umgewandelt wird. [40]

Erneute Einrückung XML-Code Ergebnis
Vorher 
<text>
  <tspan>O</tspan><tspan>n</tspan><tspan>e</tspan>
</text>
One
Danach 
<text>
  <tspan>O</tspan>
  <tspan>n</tspan>
  <tspan>e</tspan>
</text>
O n e

Inkscape ist fehlerhaft bei der Darstellung von tspan, z.B. erbt es die text-anchor-Eigenschaft vom ersten tspan-Element fälschlicherweise für die nachfolgenden tspan-Elemente, selbst wenn die Eigenschaft in allen tspan-Elementen ausdrücklich mit einem Wert versehen ist.[41] In einem solchen Fall kehre einfach die „text nestling tspan“-Struktur in nur „g nestling text“ um. Inkscape verwendet auch die Voreinstellung xml:space="preserve", um Leerzeichen zwischen tspan zu behandeln. Wenn es dir völlig egal ist, wie dein SVG in Inkscape erscheint, du aber die Standardbehandlung von xml:space bevorzugst, verwende &#160;, um jedes allgemeine Leerzeichen zu ersetzen, damit es in Inkscape nicht ausgeblendet wird.

Wenn du ein SVG mit Adobe Illustrator erstellst, siehst du im Speicherdialog die Optionen „Weniger <tspan>-Elemente ausgeben“ und „<textPath>-Element für Text auf Pfad verwenden“. Um die Konsistenz des Erscheinungsbildes deiner Schrift über alle Browserplattformen hinweg zu maximieren, solltest du ein Häkchen bei der ersten Option setzen und sicherstellen, dass bei der zweiten Option kein Häkchen vorhanden ist. Wenn du dies nicht tust, kann das Kerning einiger Buchstaben dazu führen, dass sie sich überlappen (abhängig von deinem Browser).

Zeilenumbruch

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,[42] 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.

Font styling class

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

Text with background edge

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;">Platzhalter</tspan>
  <tspan x="10" y="20">Platzhalter</tspan>
</text>
  • „stroke-linejoin:round“ wird definiert, um scharfe Ecken des Textstrichs zu vermeiden.

Das Problem bei der Anwendung von Kontur und Füllung auf ein und dasselbe Textelement besteht darin, dass die Kontur „über“ den Haupttext gelegt wird, was ihn ansonsten unlesbar macht, wenn die Schrift zu klein ist, aber eine größere Kontur benötigt, um sich vom Hintergrund abzuheben.

SVG-Filter können verwendet werden, um den Text über eine vergrößerte Version des Textes zu zeichnen. Der Filter erweitert zunächst den Text, legt die Farbe des erweiterten Textes fest und zeichnet dann den ursprünglichen Text über die erweiterte Version. Es kann ein Filter definiert werden, der von mehreren Textblöcken verwendet werden kann: 

<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">Platzhalter 1</tspan>
    <tspan x="10" y="95">Platzhalter 2</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.[44]

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

Gradients

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.

Größe

Verkleinern der Dateigröße

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

  • using a special program
  • manually editing the file
  • editing the program (script) for creating the file and:
    • use fewer points for curves
    • draw fewer curves


Übersetzungen

SVG Dateien können übersetzt werden oder sie sind gleich mehrsprachig mit eingebetteten Übersetzungen. Für weitere Informationen siehe Commons:Translation possible/Mehr erfahren

Nach SVG konvertieren

See also: Commons:Media for cleanup.

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

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.

Many SVG editors have tracing functions, and dedicated converters exist. In Inkscape, this is done by the potrace program.[49][50] Concretely: open the bitmap (File → Open… (Ctrl-O)), then select Path → Trace Bitmap… (Shift-Alt-B). There are various options; after using, please delete the underlying bitmap, and consider simplifying the path to reduce the number of nodes (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.

Erstellen einer neuen Datei

Wenn ein Bild nicht regeneriert oder konvertiert werden kann, bleibt nur die Möglichkeit, 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 zeitaufwändigste Option, kann aber letztlich die beste Qualität liefern.

In allen Fällen kann es sich als nützlich erweisen, das resultierende Bild in einem SVG-Editor nachzubessern - vielleicht um Details hinzuzufügen, 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 zusätzliche Punkte unnötige Details hinzufügen).

Wenn du ein SVG-Bild erstellt hast, lade es (unter einem neuen Namen) hoch und kennzeichne das ursprüngliche Rasterbild mit {{Vector version available}}, aber lösche das Rasterbild bitte nicht oder kennzeichne es nicht zum Löschen, da es immer noch für bestimmte Zwecke verwendet wird - siehe Commons:Superseded images policy für Details.

Hochladen und Kategorisieren

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 Gültigkeit vor vor dem Hochladen überprüfen; 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

Dateibeschreibungseiten

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

Fülle {{Information}} so vollständig wie möglich aus. Oft ist es hilfreich, wenn ein Bild ein vollständiges Informationsfeld hat, da dies die Kategorisierung durch andere erleichtert und es anderen ermöglicht, Übersetzungen vorzunehmen.

Ausführliche Informationen zu SVG-Medien findest du im Abschnitt § SVG software tags.

SVG-Dateien kategorisieren

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 icons
SVG image placeholders
SVG line art
SVG military map symbols by contents
SVG OpenData RATP Indices
Perspective SVG
SVG pixel art
SVG posters
SVG printing art
Tux Paint SVG
SVG related to Wikipedia
Wikipedia 20 derivatives/svg

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

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:Kategorien 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.

Tagging SVG files

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.
V
 
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/de|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 Raymond at 18:34, 27 Oktober 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 (or check the talk page). 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.
беларуская (тарашкевіца) ∙ Deutsch ∙ English ∙ español ∙ magyar ∙ italiano ∙ 日本語 ∙ македонски ∙ русский ∙ slovenščina ∙ svenska ∙ ไทย ∙ Tiếng Việt ∙ 中文 ∙ 中文（中国大陆） ∙ 中文（简体） ∙ 中文（繁體） ∙ 中文（香港） ∙ 中文（新加坡） ∙ 中文（臺灣） ∙ +/−
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/de 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-Dateien in MediaWiki

Wie SVG-Dateien in MediaWiki funktionieren

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-Dateien via MediaWiki skalieren

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

Häufig gestellte Fragen

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?
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![51]
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][needs update] 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.

As SVG is just an XML specification, it is possible to write SVG files manually in a text editor, or with your own programs/scripts.[52] In fact, many SVG images are written in text editors. An editor which can highlight the syntax is helpful. Check your work with the W3C SVG validator.

Viewers

All modern web browsers render SVG natively.

  • librsvg, a rendering library used by MediaWiki and the following viewers:
  • 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 editor used to preview SVG from its source code
  • resvg, is one of the fastest and most correct SVG-render[53], also provides additional packages for viewer, optimizer (limited support) and 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 for svg-rendering
  • svgexport, a Node.js module
  • cairosvg, a Python library
  • ImageMagick, image-converter
  • chrome-svgrender, renders SVG files using Headless Chrome
  • SVG.NET, ein einfacher Renderer
  • QtSVG, ein einfacher Renderer
  • wxsvg, ein einfacher Renderer

Converters

Most SVG editors include a raster-to-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


Editors


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

Urheberrecht

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:

Siehe auch

Wartung:

Einzelnachweise

  1. ↑ Wenn ein style-Element sein type-Attribut nicht spezifiziert, dann wird der Typ aus dem svg-Element contentStyleType-Attribut (welches in der SVG DTD auf "text/css" voreingestellt ist) erhalten. http://www.w3.org/TR/SVG11/styling.html#StyleElement
  2. ↑ http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
  3. ↑ User:JoKalliauer/Optimization#SVG sourcecode edits without visual change
  4. ↑ W3C - gültige DTD-Liste - Optionale Doctype-Deklarationen
  5. ↑ a b Keine DOCTYPE-Deklaration enthalten, W3C - Es wird nicht empfohlen, eine DOCTYPE-Deklaration in SVG-Dokumente aufzunehmen.
  6. ↑ W3C - Es gibt keine (normative externe) DTD für SVG 2.0
  7. ↑ Validator API, https://validator.w3.org/docs/api.html
  8. ↑ W3C: XML-Deklaration
  9. ↑ W3C: SVG - Prolog and Document Type Declaration
  10. ↑ W3C: XML-Zeichenkodierung
  11. ↑ http://www.w3.org/TR/SVG/struct.html#NewDocumentOverview
  12. ↑ W3C: SVG linking
  13. ↑ W3C: SVG viewBox
  14. ↑ Philip Rogers (2015-04-30). Intent to deprecate: SMIL. Google Groups. Retrieved on 2015-06-27.
  15. ↑ https://caniuse.com/#feat=svg-smil
  16. ↑ https://github.com/svg/svgo/issues/1055
  17. ↑ https://github.com/RazrFalcon/svgcleaner/issues/213#issuecomment-589801095
  18. ↑ https://github.com/scour-project/scour/commits/master
  19. ↑ User:JoKalliauer/Optimization#SVG sourcecode edits without visual change
  20. ↑ User:JoKalliauer/Optimization#Useless elements that should be kept
  21. ↑ https://github.com/scour-project/scour/wiki/Documentation#--renderer-workaround-and---no-renderer-workaround
  22. ↑ Inkscape FAQ: What about flowed text?
  23. ↑ Du kannst die Farbe des nicht sichtbaren Pfades, der als Begrenzung der flowRoot verwendet wird, ähnlich wie bei File:FlowRoot_and_flowRegion.svg ändern, oder du kannst auch das allgemeinere path-Tag verwenden und andere Formen erstellen.
  24. ↑ User:JoKalliauer/RepairFlowRoot#replace notempty flow-text using (Inkscape)
  25. ↑ einige Fälle, die translate=".."-Attribute oder einige Fälle, die text-align=".."-Attribute
  26. ↑ Siehe zum Beispiel: File:Petit_Monde_de_Gondry,_Jonze_&_Kaufman.svg
  27. ↑ das auch auf Github
  28. ↑ User:JoKalliauer/RepairFlowRoot#delete empty flow-text using (Text-Editor)
  29. ↑ Category:Images with SVG 1.2 features
  30. ↑ User:JoKalliauer/RepairFlowRoot#That the black square won't get rendered (Text-Editor)
  31. ↑ Das Attribut viewBox im SVG-Element hat Vorrang bei der Definition der nativen Auflösung, wenn es sich von den Attributen width und height unterscheidet.
  32. ↑ Font-kerning: Hilfe mit Datei bei Grafik-Dorfpumpe, vergleiche auch File:Fonttest-Kerning.svg.
  33. ↑ textLenght attribute in w3.org
  34. ↑ http://www.w3.org/TR/SVG/fonts.html#FontFaceElementFontFamilyAttribute
  35. ↑ www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#generic-font-families
  36. ↑ a b User:AntiCompositeNumber on phab:T180923#6557063
  37. ↑ W3C: SVG - The 'tspan' element
  38. ↑ W3C: SVG - White space handling
  39. ↑ W3C: SVG 2 - The 'xml:lang' and 'xml:space' attributes
  40. ↑ librsvg behält dieses zusätzliche Leerzeichen bei, aber während der Textausrichtung in der Mitte oder am Ende wird dieses Leerzeichen ignoriert.
  41. ↑ https://bugs.launchpad.net/inkscape/+bug/168023
  42. ↑ W3C: SVG – The ‘textPath’ element
  43. ↑ Avoid the ‚style‘ attribute where possible
  44. ↑ Chapter 11: Painting: Filling, Stroking and Marker Symbols. W3C (2012-08-12). Retrieved on 2012-11-28.
  45. ↑ paint-order. Mozilla Developer Network (2013-01-12). Retrieved on 2013-10-21.
  46. ↑ A Simple Trick for Optimizing SVG Files by WebpageFX
  47. ↑ 35-optimizing-svg-tools by CSS-Tricks
  48. ↑ css-tricks : understanding-and-manually-improving-svg-optimization
  49. ↑ Inkscape tutorial: Tracing
  50. ↑ Inkscape wiki: Tools: Vectorize/trace
  51. ↑ A feature bug report for this exists since January 2005 on Inkscape launchpad.)
  52. ↑ Image made with C++ code by Claudio Rocchini
  53. ↑ User:JoKalliauer/SVG test suites

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