User:Furfur/SVG help

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search
Das offizielle Logo für das SVG-Dateiformat

SVG (scalable vector graphics, „skalierbare Vektorgrafik“) ist ein unterstütztes Dateiformat in Wikimedia Commons. Es eignet sich für Diagramme, Karten, und andere nicht-fotografische Bilder. SVG wird in den Commons sehr gerne gesehen, da es grafische Objekte mit einem Quellcode beschreibt und damit die zur Zeit besten Möglichkeiten bietet den Inhalt der Grafiken zu ändern und zu verbessern. SVG-Dateien werden in den Wikimedia Commons ausgiebig verwendet. Im folgenden Text werden einige Tipps zum SVG-Dateiformat gegeben.


Was ist SVG?[edit]

Ein Beispiel einer SVG-Datei — man beachte, dass die darin abgebildeten Kurven immer glatt und nie „gezackt“ erscheinen, unabhängig davon, in welcher Vergrößerung man das Bild ansieht.

Scalable vector graphics (SVG) ist eine XML-Spezifikation und ein Dateiformat um zweidimensionale Vektorgrafiken (im Gegensatz zu „Bitmap“- oder Rastergrafiken), entweder in statischer oder animierter (bewegter) Form zu beschreiben. Es ist entweder im reinen Textformat oder in komprimiertem binärem Format gespeichert, was im Vergleich zu den meisten anderen Bilddateiformaten, wie JPEG oder GIF wesentlich effizienter hinsichtlich der Dateigröße ist. SVG-Dateien erlauben auch die Einbettung von Rastergrafiken und editierbarem Text.

Erstellung von SVG-Bildern für Wikimedia Commons[edit]

Programme, mit denen SVG-Dateien erstellt werden können, werden weiter unten beschrieben. Alternativ kann der SVG-Code von SVG-Dateien direkt mit jedem Texteditor oder jeder IDE bearbeitet werden. Die folgenden Abschnitte erläutern spezifische Eigenheiten des SVG-Dateiformats.

Vor dem Hochladen: Validierung und Überprüfung des Aussehens[edit]

Validierung[edit]

Das Bild sollte, bevor es hochgeladen wird mit einem SVG-Validator überprüft werden (validator.w3.org). Dies kann mögliche Probleme in der SVG-Datei aufdecken. Bedauerlicherweise kann der genannte Validator nicht mit RDF oder anderen Metadaten umgehen, wenn diese Bestandteil der Datei sind, jedoch können trotzdem Fehler in der betreffenden Datei gefunden werden. Der Validator unterstützt verschiedene Doctype-Deklarationen, jedoch ist dies für SVG nicht erforderlich.[1][2]

Siehe: #Markierung von SVG-Dateien für eine Beschreibung, wie eine Datei als validiert gekennzeichnet wird

Aussehen des Bildes[edit]

Verschiedene Programme und Browser können ein und dieselbe SVG-Datei in etwas unterschiedlichen Weisen rendern oder rastern.

Das Aussehen des Bildes in einem Editor für Vektorgrafiken (z. B. Adobe Illustrator) muss nicht mit dem Aussehen des Bildes, nachdem es auf die Commons hochgeladen wurde und wie es von anderen gesehen wird, übereinstimmen. Auch werden alle SVG-Dateien automatisch in PNG-Dateien umgewandelt, wenn sie in einem Wikipedia-Artikel verwendet werden und dies kann das endgültige Aussehen der Datei ebenfalls beeinflussen. An einem Beispiel illustriert: in einer SVG-Datei mit sehr feinen Strichen sehen diese in Adobe Illustrator wahrscheinlich in der Regel dicker aus, als wenn diese mit dem Browser Google Chrome angesehen wird. Für Ersteller von SVG-Dateien empfiehlt es sich deswegen, eine erzeugte Datei in verschiedenen Browsern anzusehen um sicherzustellen, dass dies korrekt gerendert wird. Auf ähnliche Weise kann die Datei auch mit verschiedenen Bildverarbeitungsprogrammen überprüft werden. Um sich in der Vorschau anzusehen, wie eine SVG-Datei in eine PNG-Datei gerendert wird, gehe zu Commons:SVG Check.


Die Gründe, warum dieselbe Datei in unterschiedlichem Kontext verschieden gerendert wird, liegen darin, dass die entsprechenden Browser oder Programme den SVG-Code der Datei verschieden umsetzen. Das Ziel sollte es daher sein, einen „kleinsten gemeinsamen Nenner“ sicherzustellen, so dass das Bild unabhängig vom Browser korrekt dargestellt wird. Man muss sich bewusst sein, dass das eigene Bildverarbeitungsprogramm die Datei nicht notwendierweise exakt so darstellt, wie sie anderen Betrachtern später erscheint.

Einige Programme erlauben die Einbettung von Raster-Bildern und weisen dabei möglicherweise nicht darauf hin, dass diese Raster-Bilder bei der Speicherung der Datei im SVG-Format nicht simultan in das Vektor-Format umgewandelt werden. Bei der Einbettung von Rasterbildern muss daher sorgfältig darauf geachtet werden, welche Arten von Filtern und Effekten verwendet werden. Das Rasterbild enthält möglicherweise auch eingebettete externe Links, die vor dem Hochladen auf Wikimedia Commons entfernt werden müssen. Die diesbezüglichen Möglichkeiten und Optionen hängen vom verwendeten Grafikprogramm ab.

Wenn Adobe Illustrator verwendet wird, können beispielhaft folgende Effekte dazu führen, dass ein Pfad in ein Raster konvertiert wird:

  • Jedes Muster, mit dem ein Objekt gefüllt wird — auch die Muster, die in Illustrator voreingestellt sind. Das Problem kann unter Umständen angegangen werden, indem das Muster durch den Bildersteller selbst in ein Raster konvertiert und dann anschließend mit Objekt > Interaktiv nachzeichnen in ein Vektorformat überführt wird.
  • Jeder Pfad, der mehr als eine von Illustrators „Effekten“ enthält — z. B. Fischaugen-Verkrümmung, oder eine freihändige Verzerrung. Illustrator kann nicht mit zwei Effekten bei ein und demselben Pfad umgehen und rastert diese.
  • Jeder Pfad, der mit Objekt > Verzerrungshülle verändert wurde. Es kann versucht werden, dies mit den o. g. Tricks zu umgehen. Die Ergebnisse sind meist aber eher enttäuschend.
  • Jeder Pfad mit „Raster“-Effekt aus dem Effekt-Menü. Der Raster-Effekt sollte deswegen nicht verwendet werden.

Die obigen Beispiele stellen nur eine Auswahl von Situationen dar, in denen Illustrator ein Raster erzeugt, wo ein Vektorformat intendiert war. Je einfacher Pfade gestaltet sind, desto höher die Wahrscheinichkeit, dass Illustrator sie als Vektorformat beibehält.

Für weitere Informationen, wie eine SVG-Datei für MediaWiki überprüft werden kann, siehe #Wie SVG-Dateien in MediaWiki funktionieren.

SVG-Dokumenten-Deklaration[edit]

<?xml version="1.0" encoding="utf-8"?>
<svg
xmlns="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink"

width="400" height="300"
viewBox="0 0 400 300"
>

Der Quelltext jeder SVG-Datei sollte mit der grundlegenden Information über ihre Dimension und den Namensraum beginnen. Document type declaration oder DOCTYPE ist vollständig unnötig. Das World Wide Web Consortium (W3)-Konsortium besteht darauf, dass eine Zeichenkodierungs-Deklaration erforderlich ist und der W3-Validator gibt eine Warnung (keinen „Fehler“) heraus, wenn diese fehlt. Wenn bei der Datei keine anderen Beanstandungen vorliegen, erzeugt der Validator das Ergebnis tentative pass („vorläufig bestanden“, im Gegensatz zu pass). Der wichtige Aspekt bei der Zeichenkodierung liegt darin, dass die Software, mit der eine SVG-Datei erzeugt oder editiert wird, die Option bereitstellen sollte, eine bestimmte Zeichenkodierung zu wählen. UTF-8 ist für die Internationalisierung empfohlen (RECOMMENDED), im Gegensatz zu ANSI oder Unicode. Byte Order Mark (BOM) sollte aufgrund ungenügender Kompatibilität zu älteren Anwendungen vermieden werden.

Im SVG element sind Breite, Höhe und Namensraum-Eigenschaften gefordert. Wenn Skala oder Position des Bildes geändert werden sollen kann das viewBox-Attribut hinzugefügt werden. Von allen XML-Namensräumen sollte mindestens xmlns="https://www.w3.org/2000/svg" vorhanden sein, ansonsten wird die SVG-Datei nicht gerendert. Wenn die linking-Funktion in der SVG-Datei verwendet wird, muss xmlns:xlink="https://www.w3.org/1999/xlink" enhalten sein um sie zu aktivieren.

Bitmaps[edit]

Es gibt einige nützliche Verwendungen von Bitmaps in SVG-Dateien, wie die Anmerkungen in einer Fotografie (zum Beispiel das Hinzufügen von Beschriftungen zu einer anatomischen Fotografie). Meistens sind Bitmaps in SVG-Dateien jedoch nicht notwendig und sollten oft besser in ein Vektorformat konvertiert oder komplett neu im Vektorformat erstellt werden. Bitmaps sollten in eine SVG-Datei aufgenommen werden, wenn dies als die beste Lösung erscheint, bzw. sollten als Vektorformat neu erstellt werden, wenn dies ein besseres oder informativeres Bild ergibt. Andere Benutzer, die in den Commons auf solche gemischten Bilder stoßen, können das Etikett {{BadSVG}} an ein Bild, das unerwünschte Raster-Bildelemente enthält, anbringen Bitte überlege sorgfältig, ob Bitmaps direkt in einer SVG-Datei verwendet, oder ob sie vorher in das Vektorformat konvertiert oder neu im Vektorformat erstellt werden sollten, bevor sie in eine Bild-Datei aufgenommen werden. Wenn ein Bitmap-Bild verwendet wird, muss darauf geachtet werden, dass es eingebettet und nicht nur verlinkt wird. Im letzeren Fall würde es nicht gerendert werden.

Animation[edit]

SVG-Bilder können eine mit SMIL eingebaute Animation enthalten, jedoch wird diese, da .svg bei Verwendung in den Wikimedia-Projekten immer in .png konvertiert wird, nur für diejenigen sichtbar sein, die sich die originale SVG-Quelldatei ansehen. WikiMedia schränkt zur Zeit (Stand: 20. November 2014) die Verwendung von Animationen die das from-Attribut in einem animate-Element benutzen, aus Sicherheitsgründen ein.[3] Der Versuch, eine solche Datei hochzuladen, führt zur Fehlermeldung „This file might be corrupt, or have the wrong extension“. Möglicherweise kann eine solche Animation unter Verwendung der values und keyTimes-Attribute derart konvertiert werden, dass sie absolute Zeitwerte verwendet. Siehe #Markierung von SVG-Dateien für eine Beschreibung, wie eine SVG-Datei als animiert gekennzeichnet wird.


„Title“-Element[edit]

Das "title"-Element direkt unter dem SVG-Element dient als Titel-Name des SVG-Bildes selbst, aber es kann auch weiter innen in den abgeleiteten Elementen in der SVG-Datei angewandt werden. Die meisten modernen Desktop-Browser rendern diese Titel in Popup-tooltips, die dem Leser helfen, die Bedeutung eines Objektes beim Darüberfahren mit dem Mauszeiger zu erfassen, auch wenn es eine Texterklräung zu dem Objekt gibt. In gleicher Weise kann title auch für Text verwendet werden um eine zusammenfassende Information zu geben. Jedoch ist es in der Regel sinnvoll einen Hinweis auf die Existenz eines title-Elements zu geben, indem der zugehörige Text hervorgehoben, z. B. unterstrichen wird. XML-Kommentare (eingeschachtelt zwischen <!--" und "-->) sind besser für technische Informationen, die sich an Benutzer richten, die den SVG-Quellcode editieren wollen, geeignet. Diese sollen

normalerweise nicht dem Leser dargestellt werden. Zur Zeit können die meisten mobilen Browser keine title-Elemente, außer dem, das sich direkt unter dem SVG-Element befinden, darstellen, weil es kein Äquivalent für den Mauszeiger auf mobilen Geräten gibt. 

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" width="50" height="50">
<title>Titel der gesamten SVG-Datei</title>
<g id="shapes">
<title>Titel der "shapes"-Gruppe</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 Texts</title>
</text>
</g>


„style“-Element[edit]

Man kann SVG-Grafiken auch mit einem internen Stylesheet versehen und so das Markup übersichtlicher gestalten. Laut SVG-Spezifikation ist der Standardwert für das type-Attribut eines styleElements der Wert "text/css" und könnte daher weggelassen werden. Leider folgt der interne SVG-Renderer librsvg nicht dieser Regel. SVG-Grafiken, die CSS-Festlegungen im style-Element nutzen, müssen daher ein explizites type="text/css" in ihrem ‎<style>-Etikett haben. Mit anderen Worten: ‎<style type="text/css"> muss alle vorkommenden ‎<style> ersetzen, da das style-Element sonst ignoriert wird. Dieses Problem kann in den Revisionen von File:Talehunt logo.svg beobachtet werden. Versionen ohne type="text/css" in ihrem ‎<style> werden nicht nach der CSS-Festlegung, sondern mit dem Standardwert schwarz gefüllt. (phab:T68672)

Scripting[edit]

MediaWiki akzeptiert keine SVG-Dateien, die Scripts enthalten.

Externe Dateien[edit]

Vor dem Abspeichern der endgültigen Version einer SVG-Datei sollten alle Verweise auf andere Dateien, die zur Erstellung verwendet wurden, entfernt werden (dies ist mit dem Begriff „linking“ gemeint). Wenn diese Verweise im SVG-Text verbleiben, wird das Bild falsch oder gar nicht gerendert, da die externen Dateien nicht gefunden werden.

Aufräumen[edit]

Es ist auch sinnvoll, nicht benutzte Definitionen (defs) zu entfernen, da diese die Dateigröße unnötigerweise aufblähen können. Scour ist ein open source Python-Script, das SVG-Dateien reinigt und optimiert. Es wurde in Version 0.47 von Inkscape integriert und kann in Inkscape genutzt werden, wenn Dateien als „optimiertes SVG (*.svg)“ gesichert werden. In Adobe Illustrator gibt es unter dem Menü Objekt den Menüpunkt Pfad > Aufräumen, mit dem einzelne isolierte Ankerpunkte, leere Textpfade und ungefüllte Objekte beseitigt werden können.


Einfaches SVG, komprimiertes SVG, generische Spezifikationen[edit]

Um optimale Kompatibilität über verschiedene Browser-Plattformen zu gewährleisten, empfiehlt es sich im Allgemeinen, SVG-Dateien im "plain SVG"-Format zu speichern, wo immer das möglich ist. Diese Option findet sich üblicherweise als alternatives Dateiformat im Menüdialog Sichern unter… bzw. Save As (im Gegensatz zum Speichern im "SVG"-Format, das möglicherweise ein programmeigenes SVG-Format darstellt). Bei Adobe Illustrator oder Inkscape enthält das voreingestellte default Dateiformat Informationen (wie Benutzer-Präferenzen). Diese erhöhen unnötigerweise die Dateigröße und führen unter Umständen zu Anzeigefehlern.

Auf der anderen Seite kann das Abspeichern im "plain SVG"-Format zu Verlusten von nützlichen Informationen führen. In Inkscape geht beim Abspeichern im "plain SVG"-Format zum Beispiel die Ebenen-Information verloren. Aus diesem Grund ist es zu empfehlen, eine "plain SVG"-Version zum Hochladen in die Commons zu erstellen, aber das ursprüngliche programmeigene Format damit nicht zu überschreiben, um mit letzterem ggf. weiter arbeiten zu können. Alternativ kann die Datei im Inkscape-spezifischen SVG-Format hochgeladen und dann mit {{Created with Inkscape|IMPORTANT=yes}} markiert werden. Siehe Help:Inkscape für mehr Informationen. Inkscape und andere Programme erlauben Benutzern auch das Abspeichern im SVGZ-Format (komprimiertes binäres Format). Dieses Format wird in den Commons nicht unterstützt und sollte bei Bildern, die dorthin hochgeladen werden, nicht verwendet werden. Solche Bilder werden nicht gerendert.

Falls die Bearbeitung mit einem Texteditor erfolgt (z. B. als einfache Übersetzung einer fremdsprachlichen Datei ins Deutsche) können die in der folgenden Tabelle aufgeführten Codierungen für deutsche Sonderzeichen verwendet werden:

Deutsche Sonderzeichen in SVG-Codierung
(bei Bearbeitung einer SVG-Datei mit einem Texteditor müssen
bei Textelementen statt der Umlaute diese Codierungen eingesetzt werden)
Sonderzeichen SVG-Code Sonderzeichen SVG-Code
ä √§ Ä √Ñ
ö √∂ Ö √ñ
ü √º Ü √ú
ß √ü

Schriftarten, Text[edit]

Eine kleine Demonstration in Inkscape (englisch) wie der Text vor der Konvertierung in Pfade so bewahrt werden kann dass er beispielsweise im Browser auswählbar und durchsuchbar bleibt (z. B. auch durch Suchmaschinen wie Google).

Eine begrenzte Zahl an Schriftarten kann mit dem <text>-Etikett gerendert werden. Eine Liste findet sich hier und Beispiel-Renderungen hier. Beachte, dass einige Schriftarten nicht im „Normal“-Schriftstil, sondern nur in Fettschrift oder anderen, wie Kursivschrift verfügbar sind; es sollte daher überlegt werden, ob nicht Alternativen wie Liberation-Schriftarten gewählt werden können. Bitte ziehe die Verwendung dieser Alternativen in Betracht anstatt die Schriftarten/Texte in Pfade zu konvertieren, und zwar aus den folgenden Gründen:

  • das Abspeichern als Schriftart statt als Pfad kann die Dateigröße sehr stark verkleinern , insbesondere dann, wenn die Datei große Mengen an Text enthält.
  • Typografische und andere Fehler im Bild können durch andere Benutzer viel einfacher korrigiert werden.
  • Text kann einfach in andere Sprachen übersetzt werden. Dies ist ein wichiger Aspekt, da die Commons ein multilinguales Projekt sind. Pfade erforden bei der Übersetzung wesentlich mehr Arbeit. Siehe auch Template:Translate.
  • Der Text kann mit Suchmaschinen, die unter Umständen Textpfade nicht erkennen, leicht durchsucht werden.

SVG-Dateien, die hinsichtlich der Text-/Pfad-Darstellung problematisch sind, können mit dem Etikett {{Path text SVG}} versehen werden. Um Dateiversionen mit veränderbaren Text (das, was wir „Text“ oder „Schriftart“ genannt haben) und solche mit nicht veränderbaren (d. h. Pfad-basiertem) Text zu verbinden, kann {{Vector text versions|…}} verwendet werden. Wenn dennoch Text in Pfade konvertiert werden soll, z. B. weil die textPath-Funktion nicht unterstützt wird oder wegen seltener Glyphen, die nicht im Schriftzeichensatz vorhanden sind, sollte der reine Text gruppiert und dupliziert werden, so dass er über dem konvertierten Text liegt und zusätzlich mit dem Attribut fill-opacity="0" stroke-opacity="0" versehen werden, so dass dieser gruppierte Text unsichtbar ist. Damit kann die originale svg-Datei weiterhin durch Leser manuell durchsucht, angeklickt und mit dem Cursor markiert werden. opacity="0" kann zu Missvertändnissen führen, da sich die so gekennzeichnete Textstelle zwar mit dem Cursor markieren lässt, aber dabei unsichtbar bleibt. display="none" verhindert, dass der Leser den Text durchsucht, ohne den Quellcode anzugehen. Das Konvertieren von Text in Pfade wird häufig von Anwendern, die Adobe Illustrator verwenden, genutzt, da dieses Programm nicht die text-align-Attribute zu text-anchor konvertiert und die Rückfallschriften von Wikimedia in der Regel eine andere Metrik, als die im Bild verwendete haben. Dies führt zu unerwünschten Textpositionierungen. Um dies zu vermeiden konvertieren Illustrator-Nutzer den Text häufig in Pfade, was aber die ober erwähnten Nachteile hat. Im Folgenden wird eine Anleitung gegeben, wie man SVG-Dateien, die mit Adobe Illustrator bearbeitet wurden und Text enthalten, durch Nachbearbeitung mit einem Texteditor optimieren kann.

Bei aus Adobe-Illustrator exportierten SVG-Dateien werden die Schriften nicht in allen Browsern korrekt dargestellt.

Beispiel: bei einer in Adobe Illustrator CS5 erstellten Datei mit der Schrift ’Arial' (Normal, Fett, Fett und Kursiv, Kursiv) erhält man: 

<text ... font-family="'ArialMT'" ... >Beispieltext in Arial.</text>
<text ... font-family="'Arial-BoldMT'" ... >Beispieltext in Arial Bold.</text>
<text ... font-family="'Arial-BoldItalicMT'" ... >Beispieltext in Arial Bold Italic.</text>
<text ... font-family="'Arial-ItalicMT'" ... >Beispieltext in Arial Italic.</text>

Dies wird gerendert zu:

Nachträgliches Editieren und Korrektur mit einem Texteditor ergibt (siehe dazu auch weiter unten unter #Rückfall-Schriftarten (Fallback fonts)): 

<text ... font-family="Liberation Sans, Arial, sans-serif" ... >Beispieltext in Arial.</text>
<text ... font-family="Liberation Sans, Arial, sans-serif" font-weight="bold" ... >Beispieltext in Arial Bold.</text>
<text ... font-family="Liberation Sans, Arial, sans-serif" font-style="italic" font-weight="bold" ... >Beispieltext in Arial Bold Italic.</text>
<text ... font-family="Liberation Sans, Arial, sans-serif" font-style="italic" ... >Beispieltext in Arial Italic.</text>

Dies wird gerendert zu:

Kurz zusammengefasst müssen folgende Ausdrücke ersetzt werden:

font-family="'ArialMT'" durch font-family="Liberation Sans, Arial, sans-serif"
font-family="'Arial-BoldMT'" durch font-family="Liberation Sans, Arial, sans-serif" font-weight="bold"
font-family="'Arial-BoldItalicMT'" durch font-family="Liberation Sans, Arial, sans-serif" font-style="italic" font-weight="bold"
font-family="'Arial-ItalicMT'" durch font-family="Liberation Sans, Arial, sans-serif" font-style="italic"

Schwarzes Rechteck, Fließtext-Fehler[edit]

Inkscape unterstützt ein feature, das als flowed text („Fließtext“) bekannt ist und dazu führt, dass Text automatisch so angepasst wird, dass er in die Begrenzungen eines Textrahmens passt. Bedauerlicherweise ist dieses feature nicht in irgendeinem SVG-Standard enthalten (es existiert nur in einem Arbeitsentwurf für SVG 1.2), so dass seine Verwendung nahezu mit Sicherheit zu Kompatibilitätsproblemen führt.[4] In der Wikipedia wird ein Fließtext-Textrahmen entweder gar nicht oder als schwarzes Rechteck gerendert (phab:T43424 – in Abhängigkeit von Schriftgröße und -Farbe).

Jedoch gibt es einige einfache Wege um dieses Problem zu vermeiden oder zu lösen:

  • Die einfachste Lösung ist, nur einem einzelnen Klick (ohne Mausbewegung) zu verwenden um Text mit Inkscape zu erzeugen. (Wenn dagegen Maus bewegt wird, während die Maustaste gedrückt wird um einen Textrahmen zu erzeugen, interpretiert Inkscape dies so, dass Fließtext erzeugt wird.)
  • Wenn bereits ein Fließtext-Textrahmen erzeugt wurde, kann dieser in normalen Text mit Text → In normalen Text umwandeln geändert werden.

Wenn versehentlich ein Fließtext-Textrahmen erzeugt wurde, der leer ist, d. h. keinen Text enthält, ist dieser in Inkscape nicht sichtbar oder auswählbar, führt jedoch in der Darstellung in Wikipedia zu einem schwarzen Rechteck. Um diesen leeren Textrahmen zu löschen gibt es zwei Möglichkeiten:

  • verwende den in Inkscape eingebauten XML editor (Bearbeiten → XML Editor) und lösche alle Fließtext-Rahmen (suche nach allen Knoten, die wie folgt heißen: <svg:flowRoot id="flowRootXXXX"> in der Baum-Ansicht).
  • verwende einen einfachen Text-Editor (z. B. Windows Notepad) und suche nach dem Begriff „flowRoot“. Lösche alle Textrahmen vom beginnenden XML tag (<flowRoot ...>) bis zum beendenden XML tag (</flowRoot>) mit dem dazwischenliegenden Text.

Beschränkungen der Text-Umwandlung[edit]

Die Skalierung von Schriften liefert zur Zeit noch nicht die erwarteten Ergebnisse, wenn die horizontale und vertikale Skalierung ungleich sind (die horizontale Skalierung wird ignoriert, nur die vertikale Skalierung wird durchgeführt). Dies kann die korrekte Renderung von Schriften, die vertikal skaliert wurden, unmöglich machen. Der Text kann eine unerwartete Breite annehmen und über den Textrahmen hinausragen (eine Alternative ist die Verwendung von freien Schriften, die schon vertikal skaliert sind). Ein Textelement wird mit Sicherheit falsch platziert (manchmal auch mit hässlicher Unterschneidung, ‚kerning‘) wenn die Auflösung des PNG-Renderers nicht dieselbe ist, wie die in der SVG-Datei festgelegte, und zwar unabhängig davon, wie „geradzahlig“ der Skalierungsfaktor ist (z. B. 0,5. 2, oder 4) (phab:T36947).[5] In keinem Fall sollten extrem kleine Schriften (<10px) oder extrem große Schriften in der SVG-Datei gewählt werden und diese dann der Datei auf die gewünschte Endgröße skaliert werden. Die Datei sollte immer mit „vernünftigen“ mittleren Schriftgrößen erstellt werden (leider liegt das Optimum der Schriftgröße bei 80px).[6] Beachte auch Unterschiede in der Schriftabmessung: eine SVG-Datei kann gut aussehen, wenn sie direkt in einem SVG-fähigen (modernen) Browser unter Windows oder Mac OS gerendert wird (wo geläufige, aber nicht freie Schriftarten wie Courier oder Courier New verwendet werden können). Dieselbe Datei kann aber fehlerhaft aussehen, wenn sie auf die Verwendung der Liste der drei freien Schriften, die gegenwärtig durch den SVG-zu-PNG-Renderer von MediaWiki unterstützt werden, beschränkt wird, oder wenn sie unter Betriebssystemen wie freien Distributionen von Linux angesehen wird.

Beschränkungen des Schreibmodus[edit]

Ein Diagramm in chinesischer Schrift und Sprache, das von einer vertikalen Schreibrichtung profitieren könnte; jedoch wird es nicht richtig in librsvg dargestellt …


Abweichend von Inkscape und Adobe Illustrator unterstützt die von Wikimedia und einigen Browsern verwendete librsvg-Software nicht korrekt die Schreib-Modus-Eigenschaft. Wenn dieser Eigenschaft ein Nicht-Standardwert (non-default value, d. h. Schreibrichtung nicht von links nach rechts) zugewiesen wird, klumpen sich alle Buchstaben in librsvg zusammen (phab:T65236), oder die Eigenschaft wird einfach durch Mozilla Firefox ignoriert. Wenn die alternative Schreibrichtung angestrebt wird (z. B. von oben nach unten bei asiatischen Sprachen), sollten alle Buchstaben einzeln angeordnet und nicht diese Eingenschaft benutzt werden.


Rückfall-Schriftarten (Fallback fonts)[edit]

Übersicht von Schriften, in der zu sehen ist, wie eine Schrift durch den Browser gerendert wird

In SVG-Dateien kann eine Schriftfamilie (font family), wie z. B. Arial oder Times New Roman spezifiziert werden. Eine derartige Spezifikation setzt voraus, dass der Dateinutzer die entscprechende Schriftfamilie auf seinem Rechner installiert hat. Bedauerlicherweise sind viele gängige Schriftfamilien urheberrechtlich geschützt und daher nicht unter allen Betriebssystemen installiert. Beispielsweise verfügt nicht jeder User Agent (Web Browser, email-Programm, Newsreader, etc.) über die urheberrechtlich geschützte Schriftart Arial. Falls die enstprechende Schriftfamilie nicht verfügbar ist, wird stattdessen eine Ersatzschrift („Rückfall-Schriftart“, fallback font) verwendet, wobei diese Ersatzschrift ein deutlich anderes Aussehen haben kann. Die in librsvg voreingestellte Ersatzsschrift ist Liberation Serif. Viele User Agents haben Ersatzschrift-Tabellen, die dazu dienen sollen, dass die Ersatzschriften den zu ersetzenden Schriften möglichst ähnlich sehen. Um die Ersatzschrift zu spezifizieren, ist es in der SVG-Syntax möglich, mittels font-family eine Liste von Ersatzschriftfamilien anzugeben. Der User Agent wird dann die erste verfügbare Schrift aus dieser vorgegebenen Liste als Ersatzschrift nehmen. Der Grafiker kann somit verschiedene Microsoft-, Apple-, und Unix-Schrifamilien als Rückfall-Schriftfamilien spezifizieren. Außerdem unterstützt SVG die CSS generic font family-Spezifikation.[7][8] Dies bedeutet, dass die meisten User Agents die generischen Schriftfamilien serif, sans-serif, cursive, fantasy und monospace unterstützen. Es empfiehlt sich, die generische Schriftfamilien-Spezifikation als letzten Eintrag in der erwähnten Liste von Ersatzschriftfamilien einzutragen. Für librsvg in den Commons gilt:

  • sans-serif wird umgesetzt als DejaVu Sans
  • serif wird umgesetzt als DejaVu Serif
  • cursive wird umgesetzt als DejaVu Sans
  • fantasy wird umgesetzt als DejaVu Sans
  • monospace wird umgesetzt als DejaVu Sans Mono

In den Commons verwendet librsvg die Schriftarten, die unter m:SVG_fonts#Latin_(basic)_fonts_comparison aufgelistet sind. Wenn nur die dort aufgeführten Schriften verwendet werden, werden in Wikipedia-Artikeln, die die ihre Bilder mittels librsvg darstellen, gute Ergebnisse erzielt. Grafiker sollten sich aber bewusst sein, dass SVG-Dateien auch unter Verwendung anderer User Agents dargestellt werden können. Daher ist es am günstigsten, weit verbreitete Schriftfamilien (wie Arial) oder eine Liste von Schriftfamilien, die mit einer generischen Schriftfamilien-Spezifikation endet, zu verwenden (Beispiel: Trebuchet, sans-serif). Die Schriftmetrik von generischen Schriftfamilien wie sans-serif wird hochwahrscheinlich bei verschiedenen User Agents unterschiedlich sein. In grafischen Illustrationen sind exakte Schriftmetriken häufig wichtig und die Schriftfamilie Arial kann hier als eine Art Standard angesehen werden. Wenn Arial mit sans-serif als Rückfallschriftfamilie angegeben wird, sollte die Darstellung auf Systemen, die nicht über die Schriftfamilie Arial verfügen, befriedigend ausfallen. Wenn die Schriftart Arial in einer Datei gefunden wird, wird zur Zeit (10. Februar 2011) stattdessen die Schriftart Liberation Sans für die Erzeugung der PNG-Datei verwendet. Siehe für ein Testergebnis dazu die folgende Datei Datei:ArialSubstitutionTest.svg. Um die Darstellung von der Schriftfamilie Arial unabhängig zu machen, sollten alle Ausdrücke font-family: Arial durch font-family: 'Liberation Sans', Arial, sans-serif ersetzt werden (ohne die Anführungszeichen). Einige andere Schriftarten werden auch interpretiert, so zum Beispiel die Times New Roman-Schrift derzeitig als Liberation Serif oder Courier New als Liberation Mono. Wenn nicht-westliche Buchstabenzeichen zusammen mit westlichen verwendet werden, sollte Liberation Sans vor diesen Schriftzeichen definiert werden. Wenn zum Beispiel der Text chinesische Schriftzeichen enthält sollte die font-family-Definition die folgende sein: ‘ Liberation Sans, Arial, WenQuanYi Zen Hei, SimHei, sans-serif’. In diesem Fall werden die westlichen Schriften vorangestellt, weil die Qualität westlicher Schriften in chinesischen Schriftsätzen oft schlecht ist, und daher die Schrift mit der höheren Qualität zuerst genutzt werden sollte.

  • Inkscape beginnt mit der Unterstützung von Rückfall-Schriften ab Version 0.91.
  • Adobe Illustrator Version 18.1.1 oder früher (wahrscheinlich auch in späteren Versionen) unterstützt keine Rückfall-Schriften, so dass die SVG-Datei manuell mit einem Text-Editor nachbearbeitet werden sollte nachdem sie gesichert wurde (siehe oben unter #Schriftarten, Text).
Definierte Schrift Wiki-fallback Aussehen
keine Schrift definiert Liberation Serif Liberation Serif
serif DejaVu Serif DejaVu Serif
Times New Roman Liberation Serif Liberation Serif
sans-serif DejaVu Sans DejaVu Sans
Arial Liberation Sans Liberation Sans
Courier New Liberation Mono Liberation Mono
monospace DejaVu Sans Mono DejaVu Sans Mono
unbekannte Schrift DejaVu Sans DejaVu Sans


Layout mit Text und tspan-Elementen[edit]

Obwohl nur das text-Element für die Renderung von einfachem Text in einem Bild verwendet werden kann, kann das tspan-Element hilfreich sein, wenn es sich um Text handelt, bei dem die Position eines Wortes von der Position eines anderen Wortes abhängt.[9] Ein tspan-Element muss innerhalb eines text-Elements verschachtelt sein und dann können weitere tspan innerhalb dieses tspan eingefügt werden, wobei alle Text-Stile von den außenliegenden auf die weiter innen liegenden tspan-Elemente vererbt werden. Ein Beispiel: 

<g style="font-size:12px">
<text font-weight="bold" x="10" y="10">Wikipedia beinhaltet Wissen,
<tspan fill="blue"> beigetragen
<tspan text-anchor="end" dy="12"> durch Freiwillige</tspan>
</tspan>
</text>
<text font-style="italic" x="15" y="30">Wikimedia Commons beinhaltet freie Medien-Dateien für alle Schwesterprojekte.</text>
</g>

Die Haupt-Unterschied zur „g verschalteten text“-Struktur ist der, dass einige wenige wichtige Text-Layout-Verhaltensweisen nur bei tspan zu finden sind: wenn mehrere text-Elemente aufeinanderfolgend aufgereiht werden, positionieren sie sich dennoch unabhängig; wenn mehrere tspan-Elemente aufeinanderfolgend aufgereiht werden, und dem zweiten und den folgenden tspan-Elementen keine absoluten x-Koordinaten gegeben werden, wird der Text dieser tspan-Elemente sich horizontal direkt an das Ende des Buchstabens des vorangehenden tspan-Elements im selben text-Element anreihen. tspan-Elemente sollten jedoch sparsam verwendet werden, auch dann wenn jedem tspan-Element in einem text-Element absolute x-Koordinaten zugewiesen werden. Der Grund hierfür ist, dass unter der geltenden xml:space-Definition jeder Zeilenumbruch (innerhalb text oder tspan) mit einem extra führenden Leerraum automatisch in ein Leerzeichen umgewandelt wird.[10] Wenn mehrere konsekutive Zeilenumbrüche vorliegen, werden diese als ein einzelnes Leerzeichen intepretiert. Dies wäre kein Problem, wenn nach dem Zeilenumbruch ein tspan-Element mit absoluter x-Koordinate, das linksbündig angeordnet ist (text-anchor=start, der voreingestellte Wert) folgte. Wenn xml:space der 'preserve'-Wert zugewiesen wird, übersetzt librsvg den Einzug in ein langes Tabulatorzeichen, entsprechend 8 Leerzeichen. Weil die Auto-Formatierung oder Neuordnung der Einrückungen (re-indentation, indent style) bei den meisten XML-Editoren automatisch für jeden abhängigen XML-tag einen neuen Einzug erzeugt, sollte die Neuordnung der Einrückungen sorgfältig verwendet werden wenn die betreffende SVG-Datei derartige tspan-Elemente verwendet.

Das Verhalten der verschiedenen SVG-Renderer unterscheidet sich hier erheblich und ist meist nicht konsistent mit den W3C-Spezifikationen (auch der 'preserve'-Wert von xml:space wird in SVG 2 nicht beachtet[11]). Das einzige Problem bei librsvg ist, dass es nie einen isolierten Zeilenumbruch in ein Leerzeichen konvertiert, unabhängig davon, welcher Wert xml:space zugeordnet wird, wenn sich kein führendes Leerzeichen oder Einzug vor dem tspan-tag befindet. Außer librsvg fügen fast alle modernen Browser das konvertierte Leerzeichen direkt nach dem vorangehenden Text ein. Dies ist der Grund, warum end- oder middle-Werte der text-anchor-Eigenschaft immer den Text ein Leerzeichen weiter links anordnen, weil die neue Zeile und/oder der führende Tabulator oder das Leerzeichen nach dem schließenden tspan-tag in ein unerwartetes Leerzeichen konvertiert werden.[12]

Neuordnung der Einrückungen XML-Code Ergebnis
Vorher

<text> <tspan>E</tspan><tspan>i</tspan><tspan>n</tspan> </text>

Ein
Nachher

<text> <tspan>E</tspan> <tspan>i</tspan> <tspan>n</tspan> </text>

E i n

Inkscape ist bei der Renderung von tspan fehlerhaft. Zum Beispiel wird die text-anchor-Eigenschaft vom ersten tspan-Element inkorrekt auf die folgenden tspan-Elemente übertragen, sogar dann wenn der Eigenschaft ein spezifischer Wert in allen tspan-Elementen gegeben wird.[13] Die einzige Möglichkeit, hier Abhilfe zu schaffen ist, tspan mit demselben text-anchor-Wert innerhalb desselben text-Elements zu gruppieren und text-anchor in tspan nicht zu benutzen. Dieser Behelf ist lediglich kosmetischer Natur, betreffend das Aussehen in Inkscape. Wenn Inkscape nicht zum Öffnen und Editieren verwendet wird, kann dieser Punkt ignoriert werden und tspan nach Belieben verwendet werden Wenn eine SVG-Datei mit Adobe Illustrator erzeugt wird, gibt es beim Speichern die Optionen „Weniger <tspan>-Elemente ausgeben“ und „<textPath>-Element für Pfadtext verwenden“. Um die maximale Konsistenz des Aussehens über die verschiedenen Browser-Plattformen hinweg zu gewährleisten, sollte die erste Option angewählt werden und die zweite Option nicht angewählt werden. Wenn dies nicht getan wird, wird die Unterschneidung (kerning) bei einigen Buchstaben unter Umständen nicht korrekt sein und zur Überlappung von Buchstaben führen (abhängig vom verwendeten Browser).

Automatischer Zeilenumbruch (line wrap)

In Version 1.1 gewährleistet SVG keine Form des Zeilenumbruchs (weder „hart“ noch „weich“). Jeder Zeilenumbruch sollte manuell durch Repositionierung eines neuen text oder tspan-Elements mit derselben absoluten x-Koordinate und einer neuen y-Koordinate erfolgen. Für tspan kann diese einfacher durch relative Positionierung mit der dyEigenschaft bewerkstelligt werden. Obwohl textPath vergleichbar benutzbar wäre[14] wird dieses Element nicht durch librsvg/Wikimedia unterstützt (phab:T11420).


Font weight-Wert[edit]

Die „Dicke“ einer Schrift kann mit der font-weight-Eigenschaft verändert werden. Die W3 SVG-Spezifikationen sagen, dass der voreingestellte Wert normal ist,[15] das heißt, dass die Schrift weder fetter noch dünner erscheinen soll, aber librsvg berücksichtigt diesen Wert nicht. Wenn der Text in normaler Schriftzeichendicke dargestellt werden soll, aber die Dicke schon in einem äußeren Element anders definiert wurde, sollte 400 anstelle von normal verwendet werden.

Styling class-Schriftart[edit]

Um den Prozess der Aktualisierung einer Schriftfamilie für jedes text- oder tspan-Element zu erleichtern, sollte(n) die font CSS class(es) innerhalb style Elementen und die class-Eigenschaft in den Elementen wie folgt definiert werden: 

<style type="text/css">
text {font-size:12px; font-family:Liberation Sans, Arial, sans-serif} <!-- General font styling-->
.small {font-size:9px}
.special {fill:#f93500; font-weight:bold}

Auch wenn ein bestimmter Stil einmal in der SVG-Datei definiert wurde, ist es empfehlenswert den Stil durch eine class-Definition zu ersetzen um einen geordneteren Aufbau des XML-Codes zu erhalten. Es ist ebenfalls empfehlenswert, SVG-Gruppen anstelle von CSS Klassen zu verwenden (diese können auch zu einem geringeren Code-Umfang aufgrund weniger librsvg-Beschränkungen führen, siehe die Bemerkung). Bemerkung

  • phab:T68672 – CSS-Stil-Elemente werden ignoriert, wenn der voreingestellte Wert type="text/css" weggelassen wird.
  • phab:T43423 – abgeleitete CSS-Selektoren (CSS child selectors) werden durch librsvg nicht unterstützt.
  • phab:T68551 – CSS-Klassen in text-Elementen werden nicht an abgeleitete (child) tspan-Elemente vererbt. Wenn dies gewünscht wird, muss eine separate Klasse für tspan hinzugefügt werden, oder es müssen einfach Gruppen verwendet werden (aber nicht im Text-Element, wie dies Scour unglücklicherweise tut).


Text mit Umrandung[edit]

Gelegentlich kann der Text unlesbar sein, weil die Hintergrundfarbe einen geringen Kontrast zur Schriftfarbe aufweist, oder das Muster zu komplex ist, so dass es den Leser irritiert. Dies kann so gelöst werden, indem der Text an exakt derselben Position dupliziert wird wobei der im Hintergrund gelegene Text mit einer Füllung versehen wird und der im Vordergrund gelegene Text nicht, wie folgt: 

<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 der Textfüllung zu vermeiden.

Das Problem bei der Anwendung von Füllungen auf denselben Text ist, dass die Füllung über dem Haupttext gerendert wird, so dass der Text unlesbar wird, wenn die Schriftgröße zu klein ist und eine stärkere Füllung benötigt wird um die Sichtbarkeit vor dem Hintergrund zu gewährleisten.

Wenn sehr viel Text gefüllt im Hintergrund gerendert werden muss, kann der Text manuell innerhalb <g>, <text> und <tspan>-Elementen eingeschlossen werden. Das <g>-Element, das darunter gerendert wird, enthält die Füllung; danach verwende <use> für das Textgruppen <text>-Element ohne Füllung und fülle die Schrift mit einer kontrastierenden Farbe:

W3C enthält eine paint-order-Eigenschaft in SVG 2.0, die es erlaubt, die Attribute von "fill", "stroke" und "markers" innerhalb eines Elements manuell, anstatt in der voreingestellten Ordnung zu rendern.[16] Mozilla Firefox enthält dieses Element ebenfalls experimentell, aber die Voreinstellung ist die, dass es deaktiviert ist, bis SVG 2.0 ausgereift ist. Dieses Feature kann über about:config aktiviert werden.[17]


Gradienten[edit]

Illustration von Bugzilla 376027 in Firefox. Das blau-weiße Muster wird in Firefox nicht korrekt gerendert

Benutzer von Adobe Illustrator CS5, CS6, or CC, die Firefox verwenden, können feststellen, dass ein Illustrator „Symbol“, das einen Gradienten enthält, normal als Commons PNG-Datei gerendert wird, aber wenn die SVG-Datei direkt mit Firefox geöffnet wird erscheint das Symbol leer. Andere Browser haben hier keine Schwierigkeiten — Google Chrome, und sogar Internet Explorer rendern Illustrators SVG-Symbol-Gradienten korrekt, aber aufgrund eines Fehlers, der den Entwicklern von Firefox seit 2005 bekannt ist (Mozillas Bugzilla #376027 und andere Berichte die dazu führen, wie #353575), der aber bisher nicht adäquat beseitigt wurde, stellt Firefox solche Symbole als leere Konturen dar (die Strichdicke und Pfade ohne Gradienten des Symbols sind von dem Fehler nicht betroffen). Benutzer von Adobe Illustrator sollten sich auch bewusst sein, dass Illustrator-„Symbole“, die Pfade sowohl mit Gradienten als auch einem Filter enthalten, in den Commons nur bei der ersten Verwendung des Symbols als PNG-Datei gerendert werden. Die anschließende Verwendung eines Symbols, das diese Pfade enthält, wird die Pfade (allerdings nicht das ganze Symbol) leer erscheinen lassen (weder Gradient noch Filter, Füllung oder Liniendicke werden korrekt dargestellt).

Umwandlung in SVG[edit]

Es gibt verschiedene Möglichkeiten eine Bilddatei in eine SVG-Datei umzuwandeln. Siehe #Konverter für entsprechende Software. Im Allgemeinen gibt es drei Wege, eine SVG-Datei anhand einer schon existierenden Bild-Datei zu erzeugen:

  1. Neuerzeugung
  1. Umwandlung (Konvertierung)
  1. Gänzliche Neuerstellung

Wenn Du nicht in der Lage bist, die Datei selbst in eine SVG-Datei umzuwandeln, füge die Markierung {{Convert to SVG}} an, um damit anzuzeigen, dass die Datei in eine SVG-Datei umgewandelt werden sollte. Einige Bilder sind nicht gut für das SVG-Format geeignet, insbesondere Bilder mit kontinuierlichen Farben, wie zum Beispiel Fotografien. Diese sollten stattdessen generell im JPG-Format gespeichert werden.


Neuerzeugung aus Ursprungsdaten[edit]

Wenn die Bilddatei von einem Programm erstellt wurde (also nicht „per Hand“ gezeichnet wurde) — zum Beispiel als Diagramm aus einem Tabellenkalkulationsprogramm — ist es unter Umständen möglich, das Ausgabeformat auf SVG statt Bitmap-Format zu ändern und damit eine SVG-Datei aus der selben Quelldatei zu erzeugen. Wenn dies möglich ist, ist es meist der einfachste Weg.

Konvertierung[edit]

Viele Vektor-Dateiformate können mit einem geeigneten Programm einfach in das SVG-Format konvertiert werden

Bei Raster (Bitmap)-Grafiken ist das nicht möglich, da das Bild aus einzelnen Pixelwerten und nicht aus Kontureng („Vektoren“) besteht. Diese Bilder (insbesondere PNG) können durch „Vektorisierung“ oder tracing — automatischer Generierung einer Vektorgrafik aus einem Rasterbild — in SVG-Bilder umgewandelt werden. Viele SVG-Editoren haben tracing-Funktionen und es existieren spezielle Konvertierungsprogramme. In Inkscape wird dies durch das potrace-Programm bewerkstelligt.[18][19] Konkret: öffne die Bitmap-Datei (Datei → Öffnen… (Ctrl-O)) und wähle Pfad → Bitmap nachzeichnen… (Shift-Alt-B). Nach Durchführung gibt es verschiedene Optionen, bitte die darunterliegende Bitmap-Grafik löschen und wenn möglich die entstandene Vektorgrafik verbessern, zum Beispiel durch Entfernen von überflüssigen Knotenpunkten (Ctrl-L). Adobe Illustrator erlaubt ebenfalls die Konvertierung von Bitmap-Bildern in Vektoren über die Interaktiv nachzeichnen-Funktion. Es muss darauf acht gegeben werden, dass die entstehende Vektordatei nicht unverhältnismäßig groß (oft eine Folge von zu großer Konvertierungs-Bildtreue bei Farbe und Form) bzw. nicht zu grob durch zu starke Vereinfachung wird. Bilder, die durch automatische Konvertierung entstanden sind, benötigen in der Regel eine manuelle Nachbearbeitung. Wie in Inkscape sollte die zugrundeliegende Bitmap-Vorlage nach erfolgreicher SVG-Konvertierung aus der Datei entfernt werden.

Es sollte beachtet werden, dass immer dann, wenn Illustrator eine Datei in eine SVG-Datei konvertiert, es dazu tendiert, eine Reihe von Schattierungs-Effekten, wie „Schein nach innen“ (inner glow), „Schein nach außen“ (outer glow) und Gradienten, die entlang eines Pfades oder über einen Pfad bestehen, in unerwünschte Raster zu konvertieren, die dann in die entstandene SVG-Datei über Links eingebettet werden. Derart entstandene Raster können zum Beispiel in einem Browser bei Betrachten des entstandenen SVG-Bildes in hoher Vergrößerung (Zoom) entdeckt werden. Entsprechende Bildabschnitte erscheinen verschwommen oder an den Rändern sichtbar gezackt, was bei korrekt gerenderten Vektor-Dateien nie der Fall ist. Da diese Effekte ursprünglich ohne Rücksicht auf das W3C-Konsortium entwickelt wurden, bietet Adobe keine Lösung für dieses Problem an und wird sie voraussichtlich auch in Zukunft nicht anbieten.

Um Raster-Komponenten aus einer von Adobe Illustrator erzeugten SVG-Datei vor dem Hochladen in die Commons zu entfernen muss der Ersteller zunächst herausfinden, wo sie sich in der Datei befinden. Dies kann in der im Folgenden beschriebenen Art und Weise geschehen: Beende zunächst das Editieren der Datei und speichere sie im Adobe Illustrator (*.AI)-Format. Dann sichere sie erneut im SVG-Format. Während des zweiten Sicherungsvorgangs muss beim Auswahldialog (Sichern unter…) unter Bilder > Pfad „Einbetten“ angeklickt werden. Danach schließe das Bild (Schließen oder Ctrl+w). Danach öffne die SVG-Version erneut, klicke auf den Menüpunkt Fenster, wähle den Menüpunkt „Verknüpfungen“. Es öffnet sich ein kleines Fenster mit Informationen über jeden der enthaltenen Links in der SVG-Datei, wenn welche vorhanden sind. Du kannst auf jeden der dort angezeigten Links klicken und dann auf „Gehe zu dieser Verknüpfung“. Dadurch wirst Du zu dem entsprechenden Raster gelenkt, das dann gelöscht oder durch geeignete Nicht-Raster-Alternativen ersetzt werden kann. Beachte, dass die SVG-Version des Bildes, wenn sie in Illustrator angesehen wird, sehr viel anders aussehen kann, als dieselbe Datei, die Du wenige Minuten zuvor scheinbar gesichert hattest. Dies liegt daran, dass Illustrator bei der Erzeugung der SVG-Datei Code produziert hat, bei dem es Schwierigkeiten hat, ihn beim erneuten Öffnen zu interpretieren (SVG ist kein proprietäres Datei-Format von Illustrator, *.AI dagegen schon; Illustrator wird daher nie Schwierigkeiten haben, eine intakte *.AI-Datei korrekt darzustellen, jedoch gelegentlich SVG-Dateien — selbst wenn sie mit Illustrator erzeugt wurden — nicht korrekt rendern). Erfreulicherweise werden SVG-Dateien, selbst wenn sie in Illustrator verwirrend aussehen, in der Regel zumindest scheinbar von den meisten Browsern (mit der gelegentlichen schon erwähnten Ausnahme von Firefox) und von Inkscape meist korrekt gerendert.

Neuerstellung[edit]

Wenn ein Bild nicht neu erzeugt oder konvertiert werden kann, bleibt als Option die vollständige Neuerstellung im SVG-Format anhand der Bitmap-Vorlage. Dies muss manuell durchgeführt werden und ist die zeitraubendste Option, die jedoch auch die höchste Qualität liefern kann. In jeden Fall ist es empfehlenswert, das entstandene Bild in einem SVG-Editor zu verbessern — durch Hinzufügung von Details, die sich mit dem zur Erzeugung der Bitmap-Vorlage verwendeten Programm nicht oder nur schlecht generieren ließen, oder durch Vereinfachung oder Verbesserung von Pfaden, die aus einer komplexen Konversion entstanden sind (wenn diese zum Beispiel übertrieben viele Datenpunkte enthalten). Wenn das SVG-Bild einmal erzeugt und hochgeladen ist, sollte das ursprüngliche Bild mit dem Etikett {{Vector version available}} versehen werden. Das Rasterbild soll bitte nicht gelöscht oder zu Löschung vogeschlagen werden, da es möglicherweise noch für bestimmte Zwecke dienlich sein kann. Für Details siehe Commons:Löschrichtlinien.

Hochladen und Kategorisierung[edit]

Jede SVG-Datei, die auf Wikimedia Commons hochgeladen wird, sollte folgende begleitenden Informationen beinhalten:
  • wie sie erstellt wurde: verwende die Vorlagen {{Inkscape}}, {{Adobe}}, {{HandSVG}}, etc.
  • ob sie W3C valide oder nicht valide ist: dies kann am besten durch den entsprechenden Parameter in den o. g. Vorlagen ausgedrückt werden, z. B. {{Inkscape|v}}
Das Aussehen und die Validität sollten überprüft werden bevor die Datei hochgeladen wird. Dafür eignet sich SVGcheck
Bei Unsicherheiten, oder wenn die Datei erst mit librsvg gerendert werden soll, kann die Datei nach Test.svg hochgeladen werden.


Dateibeschreibungsseite[edit]

Das Hochladen wird unter Commons:First steps/Uploading files/de beschrieben. Stelle sicher, dass {{Information}} soweit wie möglich und sinnvoll ausgefüllt wird. Eine gute Bildinformation ist oft hilfreich, weil sie die Einsortierung in Kategorien und auch die Übersetzung in andere Sprachen durch andere erleichtert. Wenn die Datei den SVG Validator-Test bestanden hat, kann das Etikett {{ValidSVG}} in die Bildbeschreibung aufgenommen werden. Siehe den #SVG-Software-Etiketten-Abschnitt für detaillierte Informationen zu SVG-Medien.


Kategorisierung von SVG-Dateien[edit]

SVG-Dateien-Kategorienbaum

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

Alle SVG-Grafiken sollten in die entsprechenden Unterkategorie(n) der Kategorie:SVG einsortiert werden. Bitte sortiere die Datei nicht in die Hauptkategorie ein, da diese schnell überfüllt und damit weitgehend wertlos wird (es gibt mehr als 100.000 SVG-Dateien in den Commons).

Sortierte Unterkategorien, die sich nicht auf den Dateiinhalt, sondern auf technische Aspekte beziehen („erzeugt mit/created with…“, „animiert/animated“, „valide/valid“, usw.) mittels '*'um sie von der alphabetischen Auflistung auszunehmen.

Der SVG-Kategorienbaum[edit]

Die Stammbaumkategorie ist Category:SVG, als Teil von Category:Images → Category:Media types. Hinsichtlich der Erzeugung von einzelnen Unterkategorien zu einem Thema ist es nicht erforderlich, dass die gesamte Hierarchie des Kategorienbaums Category:Thema erzeugt wird. Normalerweise reicht es aus, einige Themen zusammenzufassen. Zum Beispiel könnte Category:SVG colors alle Farb-bezogenen (color) SVG-Dateien enthalten, so dass es sinnlos wäre Category:SVG red, Category:SVG blue usw. für einzelne Farben zu erzeugen. In der Zukunft mögen einige Subkategorien später hilfreich werden, aber man sollte nahe an den existierenden Kategorien bleiben. Kategorien sollen dazu dienen Medien zu finden und nicht zu verstecken. Überkategorisierung sollte vermieden werden.

Siehe Commons:Categories für allgemeine Informationen.


Namenskonventionen für Kategorien[edit]

Kategorienamen beginnen mit „SVG“, gefolgt vom Thema in Kleinbuchstaben (wenn es kein Eigenname ist). Zum Beispiel würde eine Kategorie, die SVG-Dateien in Bezug auf Chemie enthält, die Bezeichnung Category:SVG chemistry erhalten. Über lange Zeit gab es keine Namenskonventionen, so dass viele Namen existieren, die nicht dieser Konvention entsprechen. Diese werden mit der Zeit umbenannt.


Markierung von SVG-Dateien[edit]

Siehe die Kategorie:SVG marker templates für alle verfügbaren SVG-Markierungen.
Transcluded from Commons:SVG marker templates

SVG software tags

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

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

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


See #Software section for a list of programs.

SVG file tags

 
This image includes elements that have been taken or adapted from this file:
 Example.svg.
Translate this file This SVG file contains embedded text that can be translated into your language, using any capable SVG editor, text editor or the SVG Translate tool. For more information see: About translating SVG files.
This file is translated using SVG <switch> elements. All translations are stored in the same file! Learn more.

For most Wikipedia projects, you can embed the file normally (without a lang parameter). The Wikipedia will use its language if the SVG file supports that language. For example, the German Wikipedia will use German if the SVG file has German. To embed this file in a particular language use the lang parameter with the appropriate language code, e.g. [[User:Furfur/SVG help|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 Jonesey95 at 14:09, 26 October 2022 (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 user page appear to have been inadequately vectorized, for example, by auto-tracing, and may require revectorization to meet quality standards.
Automatic tracing of complex images can produce overly-large files, inaccurate outlines, and often miss out smaller details completely. Please consider editing this image by hand in a vector editor to improve it. For further information please see our picture tutorial and SVG help. For assistance, refer to the Graphics Lab.
Deutsch ∙ English ∙ español ∙ français ∙ italiano ∙ sicilianu ∙ slovenščina ∙ svenska ∙ македонски ∙ português do Brasil ∙ русский ∙ 日本語 ∙ 한국어 ∙ 中文 ∙ 中文（简体） ∙ 中文（繁體） ∙ +/−
The file size of this SVG image may be abnormally large because most or all of its text has been converted to paths rather than using the more conventional <text> element. Unless rendering the text of the SVG file produces an image with text that is incurably unreadable due to technical limitations, it is highly recommended to change the paths back to text. Doing so will ease the process of localizing this image to other languages and is likely to reduce the file size in a significant scale. Other SVGs containing path-based text can be found at Category:Path text SVG. For more information, see SVG: Fonts and Preparing images for upload: Text.
italiano ∙ Deutsch ∙ magyar ∙ English ∙ español ∙ svenska ∙ Tiếng Việt ∙ беларуская (тарашкевіца)‎ ∙ македонски ∙ русский ∙ slovenščina ∙ ไทย ∙ 日本語 ∙ 中文（中国大陆）‎ ∙ 中文 ∙ 中文（台灣）‎ ∙ 中文（新加坡）‎ ∙ 中文（简体）‎ ∙ 中文（繁體）‎ ∙ 中文（香港）‎ ∙ +/−
This file has been superseded by Example.svg. It is recommended to use the other file. Please note that deleting superseded images requires consent.
 new file
Sorry, this SVG file is solely a source for re-utilization, editing or printing purposes. Please do not use this graphic within Wikipedia articles! MediaWiki isn't able to render this image correctly. Some details may be missing or look wrong. When you include the image in a Wikipedia or any other Wikimedia project site's page, you may want to use the other file, until the support increases.
User:Furfur/SVG help 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[edit]

Wie SVG-Dateien in MediaWiki funktionieren[edit]

Wenn die SVG-Datei in die Commons (oder ein anderes MediaWiki) hochgeladen wird, produziert die Software automatisch PNG-Vorschaubilder, die in die Artikel und die Beschreibungsseite eingebettet sind. Wenn die Datei heruntergeladen wird (unter Microsoft Windows üblicherweise mit rechtem Mausklick auf das Bild) wird das PNG-Bild heruntergeladen. Wenn beabsichtigt ist, die SVG-Datei herunterzuladen, muss der Link auf das Bild anstelle des Bildes gesichert werden. Dies funktioniert mittels rechtem Mausklick nur auf der Bescheibungsseite der Bilddatei und nicht bei der Miniaturbild-Ansicht. MediaWiki verwendet librsvg um SVG-Dateien in PNG Dateien zu kovertieren und darzustellen (Renderung von SVG-Dateien). Es hat einige seit langem bekannte Fehler, die beseitigt werden sollten, so dass es sinnvoll ist, die Datei vor dem Hochladen zu überprüfen. Das Unix Kommandozeilen-tool rsvg-view kann benutzt werden, um sich in der Vorschau anzusehen, wie eine SVG-Datei aussehen wird, wenn sie durch MediaWiki gerendert wird. Zur genauen Testung der Darstellung kann die SVG-Datei auch mit SVG Check, das unter toollabs:svgcheck zugänglich ist, getestet werden.

Weitere Informationen: MediaWiki SVG-Limitationen.

Skalierung von SVG-Dateien über MediaWiki[edit]

Was dies bedeutet: Wenn Du zum Beispiel eine große Version Deiner SVG-Datei für eine detaillierte Karte produzieren willst, oder Bitmaps-verarbeitende Software wie gimp benutzt, oder Kalligrafie, die einen Buchstaben pro Seite druckt oder etwas ähnliches. MediaWiki muss dann durch Verwendung von https://commons.wikimedia.org/w/thumb.php?f=Foo.svg&w=1000, oder durch etwas wie [[File:Foo.svg|1000px]] dazu gezwungen werden, eine große PNG-Bildvoransicht zu produzieren, im Sandkasten oder auf Deiner Diskussionssseite oder einer anderen unkritischen Seite. Der Ausdruck dieses großen PNG-Bildes wird viel besser aussehen, als wenn ein übliches Vorschaubild hochskaliert wird! Natürlich kann für den Ausdruck auch SVG-Software wie Inkscape verwendet werden, aber manchmal sieht das Bild darin anders aus als auf dem Bildschirm (Schwarzer Hintergrund, andere Schriften, etc.).

Häufig gestellte Fragen[edit]

See also: Probleme mit SVGs, Häufig getellte Fragen zur SVG-Erstellung für die Wikipedia.
Was sind vernünftige Bildmaße für meine SVG-Bilder?
Die absolute Größe des Dokuments spielt keine große Rolle, da sie nur relevant dafür ist, wie groß ein Bild dargestellt wird, wenn es für sich selbst angesehen wird. Die Dateigröße hängt nicht von den Dimensionen im Dokument ab. Das Bild kann nach Belieben des Benutzers gedehnt oder komprimiert werden, ohne dass sich die Bildqualität oder Dateigröße ändert. Die empfohlene Bildhöhe ist 400–600 Pixel. Wenn der Benutzer das Vollbild ansieht, vermittelt eine Bildbreite von 600–800 Pixeln einen guten Großaufnahmen-Eindruck, wobei das Bild immer noch vollständig auf dem Bildschirm darstellbar ist, ohne dass man Herein- oder Heraus-Zoomen muss: während 9 × 9 Pixel zu klein sind, sind 3000 × 2000 zu groß. Die Länge der kürzeren Bildkante des als PNG durch librsvg gerenderten Bildes wird bei 4096 Pixeln begrengt (d. h., wenn die Breite kleiner als die Höhe ist, wird die 4096-Grenze auf die Breite angewandt und die Höhe wird entsprechend skaliert, oder umgekehrt), daher ist es nicht sinnvoll SVG-Bilder hochzuladen, die eine derartig hohe Auflösung erfordern, weil der Text zu klein ist um in der Vorschau gelesen zu werden. Die kleinste Schriftgröße in einer Datei sollte mindestens in einer 2000-Pixel-Bildbreite, der größten auf der Bildbeschreibungsseite empfohlenen Renderungs-Auflösung, lesbar sein. Andernfalls sollte ein Rasterbild parallel zur SVG-Datei hochgeladen werden.
Wie können SVG-Dateien auf meinem Rechner in ein Rasterformat konvertiert werden?
Bei SVG-Dateien, die in einer Grafik-Software wie Inkscape inkorrekt aussehen, kann man einfach die Datei nach Wikimedia hochladen und dann den Link, der die Datei in bestimmten Pixelabmessungen rendert, sichern. Man kann dann die Zahl-px in diesem Link ändern um eine entsprechende PNG-Darstellung in einer gewünschten Pixelgröße zu erhalten. Bei Bildern mit einer Bildkante über 4096 Pixeln können Umwandlunsg-Werkzeuge wie RSVG-Convert verwendet werden, mit dem einzigen Unterschied, dass das Antialiasing fehlt. Wenn das gerasterte Bild weicher aussehen soll, kann die SVG-Datei in eine PDF-Datei umgewandelt werden und dann mit Photoshop das PDF in ein Rasterbild konvertiert werden (Inkscape hat immer noch einige Schrift-Probleme bei PDF-Dateien). Eine andere Option ohne Hochladen einer SVG-Datei nach Wikimedia ist die Benutzung der SVG Vorschau im Toolserver, die nicht die Seitenlängenbegrenzung hat, obwohl sich die Renderung einiger Schriftsätze unterscheiden mag.
Warum wird mein Bild nicht gerendert?
Dies kann verschiedene Ursachen haben. Am Häufigsten liegt der Grund in einer Referenz zu einer externen Datei, z. B. vielleicht als Überbleibsel der Verabreitung eines Bitmap-Bildes (der Renderungs-Prozess stoppt weil versucht wird, diese Datei zu finden). Um dieses Problem zu lösen stelle in Deinem Editor sicher, dass alle Referenzierungen auf externe Dateien vor dem endgültigen Abspeichern der Datei entfernt sind. Wenn es notwendig ist, Bitmaps zu verwenden, kann in Inkscape die Funktion zur Einbettung aller Bilder verwendet werden (Erweiterungen → Bilder → Alle Bilder einbetten…). Es ist auch möglich, spezielle Effekte, wie Weichzeichnen zu verwenden. Unglücklicherweise wird dies derzeitig nicht gut durch librsvg unterstützt. Siehe dazu auch #Einfaches SVG, komprimiertes SVG, generische Spezifikationen.
Wo kann ich zusätzliche Hilfe bei SVG-Dateien erhalten?
Probiere es im Commons:Graphic Lab oder in der Grafikwerkstatt bzw. Kartenwerkstatt, wenn Du ein Problem mit einer bestimmten SVG-Datei hast. Commons:Graphics village pump kann für Diskussionen über SVG und Grafiken im Allgemeinen hilfreich sein. Häufig sind SVG-Enthusiasten auf diesen Seiten zu finden, und diese sind meistens sehr hilfsbereit.
Wie kann man Dokumentengröße in Inkscape ändern?
Die Dokumentengröße startet im A4-Seitenformat. Um dieses zu vergrößeren oder zu verkleinern, erzeuge ein Rechteck in den gewünschten Bild-Dimensionen und wähle es mit dem Masuzeiger an. Danach wähle Datei → Dokumenteneinstellungen und unter Benutzerdefiniert wähle Ändern der Seitengröße auf Inhalt… > Seite in Auswahl einpassen. Das Rechteck kann anschließend gelöscht werden und die anderen Bildelemente können verschoben oder skaliert werden um den erzeugten Bereich zu füllen.
Mein Text erscheint nach dem Hochladen in die Commons als kleine Balken oder ist gar nicht sichtbar.
Wenn in Inskcape „Fließtext“ verwendet wurde, wird dieser als (schwarzes) Rechteck gerendert. Fließtext-Rahmen werden erzeugt, indem man beim Erzeugen eines Textrahmens mit gedrückter Maustaste die Maus bewegt. Um dies zu vermeiden klicke nur einmal mit der Maus um den Cursor zu positionieren und tippe anschließend den Text. Um einen Fließtext-Rahmen in einen normalen Textrahmen zu konvertieren wähle aus dem „Textmenü“ die Option „In normalen Text umwandeln“.
Wenn dies nicht den gewünschten Effekt erbringt kann das daran liegen, dass einige features von Inkscape, wie Pfadtext vom MediaWiki-Renderer nicht unterstützt werden. Wenn Du nicht Fließtext verwendest und trotzdem noch Probleme mit der Textdarstellung hast, konvertiere den Text in Pfade. Dafür wähle im Menü „Pfad“ die Auswahl „Objekt in Pfad umwandeln“. Dies wandelt den Text in Pfade um. Sichere die Datei als einfaches SVG und lade sie erneut hoch.
Meine Pfeilspitzen/gestrichelte Linien erscheinen nach dem Hochladen als kleine Blöcke oder sind gar nicht sichtbar!
Prüfe, ob das Attribut style="overflow:visible" im Element marker vorhanden ist, und nicht im Element path. Manche Kontur-features von Inkscape werden durch den MediaWiki-Renderer nicht unterstützt. Wähle das entsprechende Objekt aus und wähle im Menü „Pfad“ den Befehl „Kontur in Pfad umwandeln“. Dies wandelt die Kontur in einen Pfad um. Sichere die Datei als einfaches SVG und lade sie erneut hoch.
Wie kann ich den transparenten Hintergrund loswerden?
Ist das wirklich nötig? Normalerweise nicht! Der MediaWiki-Renderer konvertiert eine SVG-Datei in eine PNG-Datei mit transparentem weißen Hintergrund für den Bildschirm (erscheint weiß, wenn Dein Browser die PNG-Transparanz nicht unterstützt). Browser, die die SVG-Transparenz unterstützen, zeigen die weiße Hintergrundfarbe durch das Bild! (oder grau, wenn das Bild als Miniaturbild dargestellt wird). Indem ein Bild transparent gelassen wird, wird künftigen Bildbearbeitern die Arbeit erleichtert und das Bild wird vor anderen Hintergrundfarben ohne ein großes weißes Rechteck dargestellt. Wenn jedoch Dein Bild unbedingt einen Hintergrund in einer bestimmten Farbe benötigt, erzeuge in Inkscape ein Rechteck in der Größe des Bildes, fülle es mit der Hintergrundfarbe Deiner Wahl und wähle den Befehl „Nach ganz unten absenken“ aus dem „Objekt“-Menü. Sichere anschließend die Datei.
Meine Schriften werden nicht richtig gerendert. Welche Schriften werden durch den Renderer unterstützt?
Siehe meta:SVG fonts. Dort findet sich eine Liste.
Ich verwende dieselben Schriften, die in Wikimedia installiert sind, aber die Text-Positionierung in meiner SVG-Datei sieht immer noch unterschiedlich verglichen mit meinem lokalen Renderer aus.
Es hängt davon ab, welche rendering library und Version Dein lokaler Renderer verwendet. Die Positionierung und andere SVG-Aspekte (wie „Transformationen“) verhalten sich bekanntermaßen in verschiedenen Renderungs-libraries unterschiedlich. Um Ergebnisse möglichst nahe am Wikimedia-Renderer zu erhalten sollte ein Renderer benutzt werden, der librsvg verwendet. Opera, Chrome und Safari ergeben genaue Resultate. Firefox und Internet Explorer 10 sind etwas ungenau. Safari sieht besser aus, wenn eine gewise Schriftglättung aktiviert ist.
Ich zeichne eine Flagge (oder ein anderes Abzeichen) und werde nach PANTONE oder CMYK-Farben gefragt. Was soll ich tun?
Wenn Du die Worte „PANTONE“ oder „CMYK“ siehst, versuche zunächst herauszufinden, ob auch die Option „RGB“ verfügbar ist. Wikimedia-Bilder werden vielfach in Projekten wie Wikipedia, etc. genutzt und sind für die Verwendung auf Computerbildschirmen gedacht. Wenn die Option „RGB-Farben“ existiert, sollte sie vor allen anderen bevorzugt werden. Wenn nicht, können die Farben in Abhängigkeit von der Farbauswahl des jeweiligen Programms konvertiert werden, oder RGB-Werte können im Falle von PANTONE mittels Color Finder ([2]) für einen Farbcode ermittelt werden. Stelle sicher (z. B. durch eine Erläuterung auf der Diskussionsseite des Bildes), dass angegeben ist, welche Methode der Umwandlung verwendet wurde, z. B. mit einer Bemerkung "[XY-Programm] wurde verwendet um CMYK-Werte […] in RGB […] umzuwandeln".


Software[edit]

Viele Programme können mit SVG-Dateien umgehen. Du kannst welche von den unten aufgeführten ausprobieren, obwohl dies nicht die einzigen existierenden sind. Einige sind frei herunterzuladen, andere sind kommerziell erhältlich.

Da SVG eine XML-Spezifikation ist, kann man SVG-Dateien in einem Text-Editor erstellen, oder mit eigenen Programmen/Scripts.[20] Tatsächlich wurden viele SVG-Bilder mit Text-Editoren erstellt. Ein Editor, der die Syntax markiert, ist hilfreich. Überprüfe das Ergebnis mit dem W3C SVG validator.


Bildbetrachtungsprogramme (Viewers)[edit]

  • Alle modernen Web-Browser können SVG-Dateien darstellen
  • rsvg-view ist ein kleiner, einfacher Viewer für UNIX-basierte Systeme (auch portiert in Win32), der librsvg verwendet, um sich anzusehen wie SVG-Dateien aussehen wenn sie durch MediaWiki gerendert werden

Konverter[edit]

  • Die meisten SVG-Editoren beinhalten einen Raster-zu-Vektor-Konverter (tracer).
  • Scribus (mit GhostScript): kann EPS (Encapsulated PostScript)-Dateien importieren und nach SVG exportieren
  • PDFCreator: nur unter Windows, Open Source (druckt direkt aus Office in eine SVG-Datei oder in eine PDF-Datei, die dann mit Inkscape importiert werden kann; die Werkzeugleiste wird als Adware angesehen; nicht vergessen, sie im Feature-Auswahldialog zu deaktivieren)

Editoren[edit]

  • Inkscape: ist Open Source, ein frei herunterladbares Programm, um SVG-Dateien grafisch zu editieren. Verfügbar für Windows, Mac OS X und Linux
  • Sodipodi: ebenfalls für das grafische Editieren von SVG-Dateien, verfügbar für Windows und Linux. Inkscape basiert auf der Sodipodi-Engine
  • LibreOffice Draw (libreoffice.org): ein Derivat von OpenOffice Draw, kann nach SVG exportieren. Kann für manche Aspekte wie Tabellenkalkulation geeigneter als Inkscape sein, bietet aber im Allgemeinen weniger Möglichkeiten als Inkscape. Läuft unter Windows, Unix-Ähnlichen wie X11 und OS X.
  • Dia: ist Open Source, ein frei herunterladbares Programm um Diagramme zu erstellen. SVG-Export optional. Läuft unter Windows, Mac OS X und Unix-Systemen. (Weist zur Zeit einige Bugs beim SVG-Export auf.)

Spezielle Programme[edit]

  • Ipe: ist ein freier und Open-Source-Editor mit guter LaTeX-Integration für mathematisch-technische Diagramme. Beinhaltet Konverter für SVG-Dateien
  • Scour: für das Aufräumen/Verkleinern von SVG-Dateien (in Python, in Inkscape enthalten)
  • Graphviz: eine Open-Source-Software für automatisches Diagramm-Layout
  • BKchem: eine Freie Software um chemische Strukturformeln in SVG zu zeichnen, läuft unter Windows, Mac OS X und Unix-Systemen
  • Freemind: ist eine Freie und Open-Source-mind mapping-Software , geschrieben in Java, FreeMind
  • GeoGebra: ist freie und Open-Source- Multi-Plattform-Mathematik-Software mit der Möglichkeit des SVG-Exports, Geogebra
  • Vector Blocks: ist eine freie Web-basierte Software um einfache elektronische Schaltkreise schematisch zu zeichnen
  • LibreOffice Calc (libreoffice.org): für die Erzeugung von Balkendiagrammen, Kreisdiagrammen, etc.
  • Gnumeric: Tabellenkalkulation, sichert/exportiert Tabellenblätter im SVG-Format, siehe gnumeric

Aufräumen von SVG-Dateien, hin zu W3C-validen Dateien[edit]


Siehe auch[edit]

Wartung


Externe Links[edit]


Einzelnachweise[edit]

  1. ↑ W3C – valid DTD list – Optional doctype declarations
  2. ↑ Don't include a DOCTYPE declaration
  3. ↑ https://github.com/wikimedia/mediawiki/commit/6aa3befeb0f428ff32d4e3db8f66b8154a13e126#diff-7ae3ff19a5f561a36f9cd0113d931b15R1435
  4. ↑ Inkscape FAQ: What about flowed text?
  5. ↑ Das Attribut viewBox in einem SVG-Element hat Vorrang bei der Definition der Auflösung wenn es von den Attributen width und height abweicht.
  6. ↑ Schrift-Unterschneidung: Hilfe bei Graphics village pump, vergleiche auch File:Fonttest-Kerning.svg.
  7. ↑ http://www.w3.org/TR/SVG/fonts.html#FontFaceElementFontFamilyAttribute
  8. ↑ www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#generic-font-families
  9. ↑ W3C: SVG – The ‘tspan’ element
  10. ↑ W3C: SVG – White space handling
  11. ↑ W3C: SVG 2 – The ‘xml:lang’ and ‘xml:space’ attributes
  12. ↑ librsvg behält dieses Extra-Leerzeichen, aber in der Mitte oder am Ende des Texts wird es ignoriert.
  13. ↑ https://bugs.launchpad.net/inkscape/+bug/168023
  14. ↑ W3C: SVG – The ‘textPath’ element
  15. ↑ 10.10 Font selection properties, Text, W3 SVG specification
  16. ↑ Chapter 11: Painting: Filling, Stroking and Marker Symbols (2012-08-12). Retrieved on 2012-11-28.
  17. ↑ paint-order.
  18. ↑ Inkscape tutorial: Tracing
  19. ↑ Inkscape wiki: Tools: Vectorize/trace
  20. ↑ Image made with C++ code by Claudio Rocchini
Retrieved from "https://commons.wikimedia.org/w/index.php?title=User:Furfur/SVG_help&oldid=699334008"