imported>Crazy1880: Vorlagen-fix (Commons)

2023-02-07T18:45:27Z

Vorlagen-fix (Commons)

Neue Seite

{| class="hintergrundfarbe2 rahmenfarbe1 wp_fzw wp_intro" style="padding: 10px; font-size: 95%; margin-right: 5px; border-style: solid;"
| style="vertical-align:center;" |
| style="vertical-align:top; padding: 0.5em;" |
{{Portal-head2|547892|Häufig gestellte Fragen zur SVG-Erstellung für die Wikipedia}}
Bei der Herstellung von '''[[SVG]]-Dateien''' gibt es einige wiederkehrende Probleme. Diese rühren meist daher, dass zur Anzeige die SVG-Dateien umgewandelt werden. Einige der Probleme und deren Lösungen sind im Folgenden dargestellt.

Hast du eine Frage zu SVG-Grafiken, die hier noch nicht aufgeführt ist, wende dich an das '''[[Wikipedia:WikiProjekt SVG|WikiProjekt SVG]]''' oder an die [[Wikipedia:Grafikwerkstatt]]. Ausführliche Erläuterungen zu SVG-Dateien gibt es auch auf der '''[[commons:Help:SVG/de|Hilfeseite in den Commons]]'''. Allgemeine Fragen zu Inkscape werden auch in der [http://wiki.inkscape.org/wiki/index.php/DeFAQ Inkscape-FAQ] beantwortet.

Neue Antworten können über {{AddNewSection|Text='''diesen Link'''}} eingetragen werden.
|}
{{Shortcut|WP:PMS, H:SVG}}

<div style="border:2px dashed #C60; background:#FFA; padding:4pt;">[[Datei:QS icon orange abwartend.svg|24px|link=|i]] '''Aktuell''': Seit 2016 wird '''Text in SVG nur sehr bedingt''' mit richtigem Zeichenabstand dargestellt. Der '''Bug [[phab:T36947]]''' besteht schon immer, jedoch nicht so extrem. Eine Lösung (''Workaround'') ist folgendem Abschnitt zu entnehmen:
: → ''[[#Die Abstände von Buchstaben stimmen nicht]]''</div>
<div style="border:2px dashed #C60; background:#FFA; margin-top:0; margin-bottom:1em; padding:4pt;">
[[Datei:Qsicon Achtung Orange.svg|24px|links]]<big>Für eine genauere Prüfung der Anzeige und der Validität kann die SVG '''''vor dem''''' Hochladen mit '''[[toollabs:svgcheck|SVG Check]]''' getestet werden (mehr dazu auf [[commons:Commons:SVG Check|Commons:SVG Check]]).</big>
----
: Wenn du dir nicht sicher bist (SVG Check deckt z. B. nicht alle Schriften und Auflösungen ab) und zuerst sehen willst wie libRSVG die Datei tatsächlich rendern wird, laden sie unter [[:Datei:Test.svg|Datei:'''Test.svg''']] hoch.
: '''Kennzeichnen:''' Jede SVG-Datei die auf '''[[commons:|Wikimedia Commons]]''' hochgeladen wird, sollte zeigen:
:* '''Wie''' sie erstellt wurde: benutze Vorlagen wie <code>'''{{[[commons:template:Inkscape|Inkscape]]}}'''</code>, <code>{{[[commons:template:Adobe|Adobe]]}}</code>, <code>{{[[commons:template:HandSVG|HandSVG]]}}</code> oder [[commons:Commons:SVG marker templates|was auch immer]]. Mit [[Inkscape]] oder [[Adobe Illustrator]] erstellte Dateien sollten vor dem Hochladen ggf. als „Normales“ (oder „Optimiertes“) SVG abgespeichert werden (das vermeidet bereits einige kleinere Fehler).
:* '''Ob''' sie [[W3C]]-valid oder -invalid ist: setze den entsprechenden Parameter für die Vorlage, z. B. <code><nowiki>{{Inkscape|v}}</nowiki></code>. Dazu sollte die Datei mit dem '''[//validator.w3.org/#validate_by_input+with_options W3C-Validator]''' (einem Testtool u. a. für SVG) geprüft werden.
</div>

== Wieso gibt es überhaupt Probleme? ==

SVG-Dateien werden von [[MediaWiki]] nicht direkt dargestellt, sondern immer dann, wenn diese auf einer Seite eingebunden werden, in [[Portable Network Graphics|PNG]]-Dateien umgewandelt. Der Grund dafür war zunächst, dass einige Browser SVG-Dateien nicht direkt anzeigen oder skalieren konnten, allerdings sind die Gründe heutzutage tatsächlich vielschichtiger, siehe {{Phab|Task=T5593|Show=''phab:SVG client side rendering (T5593)''}}. Für das SVG-''Rendering'' wird eine angepasste und beschränkte, [[commons:Librsvg bugs|zuweilen fehlerbehaftete]] Version der Programmbibliothek '''[[libRSVG]]''' verwendet (die ursprünglich nur für Icons vorgesehen war). Auch der Bildbetrachter [//www.gnome.org/projects/eog/ Eye of Gnome] benutzt libRSVG, und wer in der Lage ist, sich dieses unter [[Linux]] verbreitete Programm mit der richtigen libRSVG-Version zu installieren, kann damit vor dem Hochladen feststellen, was alles falsch dargestellt wird (''mehr dazu auf [[WP:SVG #Dateien zu Hause testen]]'').

== Text ==
=== Warum wird meine gewünschte Schrift nicht angezeigt? ===

[[Datei:MediaWiki_SVG_font_list.svg|mini|350px|Alle installierte Schriften]]

Für den Renderer ist es wichtig, dass die Schriften, die er anzeigen soll, auch auf dem Server installiert sind. Eine Liste der für Wikimedia-Seiten verwendbaren Schriften findet sich unter [[meta:SVG fonts]].

Das direkte Einbetten von Schriftdefinitionen als SVG-Fonts kann der Renderer leider ebenfalls nicht verarbeiten. Wer unbedingt andere Schriften darstellen will, dem bleibt nichts anderes übrig, als sie in Pfade umzuwandeln. ''Siehe dazu auch: [[WP:SVG #Schriftarten in extrahierten Vektordaten]]''.

Zu beachten ist auch, dass die installierten Schriften nicht einheitlich [[Antialiasing (Computergrafik)|geglättet]] und skaliert werden. Die Unterschiede treten vor allem bei kleinen '''Größen''' in Erscheinung. Teilweise kommt es bei Verkleinerung zu Überlappungen. Falls das passiert, kann man die Abstände erhöhen oder eine andere Schriftart nehmen. Eine Veranschaulichung der Unterschiede bietet [[:Datei:MediaWiki SVG fonts.svg|diese Grafik]], vor allem in der Vergrößerung[//upload.wikimedia.org/wikipedia/commons/thumb/2/2c/MediaWiki_SVG_fonts.svg/2000px-MediaWiki_SVG_fonts.svg.png] sind die schlecht skalierbaren Fonts zu erkennen (nicht zu empfehlen sind z. B. [[Times New Roman|Times]] und [[Courier (Schriftart)|Courier]]; Aktualität ohne Gewähr). ''Siehe auch Abschnitt: „[[#Die Abstände von Buchstaben stimmen nicht]]“''

Als weitere Ursache kommt die fehlende Interpretation des Schriftnamens („font-family“) in (meist einfachen) [[Anführungszeichen]] in Frage, welche eigentlich (bei Namen mit Leerzeichen, Ziffern oder Satzzeichen außer Bindestrich, sowie möglicher Weise gleichen Wert reservierter Schlüsselwörter) vom W3C generell empfohlen werden ({{Phab|Bugzilla=62987}}).<ref>W3C Recommendation (07 June 2011): [//www.w3.org/TR/CSS21/fonts.html#propdef-font-family Font family: the ‘font-family’ property] (CSS 2.1) Specification – Fonts</ref>

Anm.:
* LibRSVG unterstützt nicht die CSS 2 „''[http://www.w3.org/TR/CSS2/fonts.html#font-shorthand shorthand font]''“-Eigenschaft ({{Phab|Bugzilla=41425}}).
* Inkscape V.0.48 unterstützt keine „''Fallback-Fonts''“, so dass die SVG-Datei nach dem Speichern in einem Text-Editor manuell aktualisiert werden muss.
{{Absatz}}

=== Warum wird mein Text nicht dargestellt? ===

[[Datei:Lötschberg Höhenprofil.svg|mini|250px|Schlechtes SVG mit Textrahmen]]
[[Datei:Lötschberg Höhenprofil-N.svg|mini|250px|Korrektes SVG ohne Textrahmen]]

Dafür können mehrere Ursachen in Frage kommen:
In '''Inkscape''' darf man keine Textrahmen („Fließtext“ / „''Flowing text''“ genannt) verwenden, sondern „nur“ einfache Texte, die man in ''Inkscape'' mit einem einfachen Klick setzt und sofort lostippt ({{Phab|Bugzilla=41424}}). Wenn man dagegen einen Rahmen aufzieht und Text dort einfügt, erhält man als Ergebnis statt des Textes schwarze Flächen oder der Text erscheint gar nicht. Fließtextfelder machen, wie der Name bereits andeutet, automatisch Zeilenumbrüche, wenn eine Zeile nicht in den vordefinierten Rahmen passt. In normalen Textfeldern können Zeilen mit der Eingabetaste umbrochen werden.

Auf SVG-Dateiebene werden in diesem Fall die in SVG-Version 1.2 vorgesehenen {{enS|''Flowing-Text-And-Graphics''}} (die nur ein Vorschlag und nie ein Standard waren)<ref>[//www.w3.org/TR/2004/WD-SVG12-20041027/flow.html Flowing text and graphics], W3 SVG1.2 Draft</ref> Elemente in der Form wie folgt abgelegt:
<pre>
<flowRoot
...>
...
</flowRoot>
</pre>
Insbesondere bei leeren Textfeldern kann es passieren, dass diese Elemente von Inkscape in Folge nicht mehr einfach ausgewählt und gelöscht werden können. Zum Konvertieren eines ''Flowing''-Textfeldes in ein normales Textfeld, gehe ins „Text“-Menü und wähle „In normalen Text umwandeln“ (''Convert to Text'') [[Datei:Inkscape icons text convert to regular.svg|18px]] bzw. „Fließtext aufheben“. [[Datei:Inkscape icons text unflow.svg|18px]] Wenn dies immer noch nicht funktioniert, ist es in diesen Fällen am einfachsten, den integrierten XML-Editor ({{Taste|Shift}}-{{Taste|Ctrl}}-{{Taste|X}}) (oder einem Texteditor) zu öffnen und alle (hier verwaisten) flowRoot-Elemente zu löschen.

Ebenfalls an einem Pfad ausgerichteter Text wird unter Umständen (z. B. mit entspr. Editor wie Inkscape) in flow-Elemente gesetzt.
→ ''Siehe hierzu: „[[#An Pfad ausgerichteter Text]]“''

Des Weiteren wird die Text-Eigenschaft '''<code>text-size</code>''' im Bezug auf relative Angaben '''<code>smaller/larger</code>''' nicht unterstützt ([[phab:T88833]]).

Als weitere Ursache kommt eine „Manuelle Unterschneidung“ in Frage, ''siehe Abschnitt: „[[#Warum ist mein Text verschoben (verschwunden)?]]“''

=== {{Anker|Warum ist mein Text verschoben?}}{{Anker|Die Schrift ist an eine andere Position verschoben}} Warum ist mein Text verschoben (verschwunden)? ===

[[Datei:Text-positioning fixed.svg|mini|150px|Korrekt einzeln positionierte Buchstaben]]
[[Datei:Text-positioning.svg|mini|150px|Falsche Darstellung: nur die Unterlänge des „g“ ragt oben links in das Bild hinein]]

Im SVG-Standard ist es möglich, jeden Buchstaben innerhalb einer Zeichenkette einzeln zu positionieren, indem man für jeden eine x- und y-Position als Liste angibt (''Kerning'' und ''Shifting'', diese Art der Positionierung geschieht meist beim PDF-Import). Das sieht dann etwa so aus:
<syntaxhighlight lang="xml">
<text
x="50 70 90 110"
y="50 52 48 46"
style="font-size:24px; font-family:sans-serif">efgh</text>
</syntaxhighlight>
Der MediaWiki-Renderer versteht diese Syntax nicht (das gleiche gilt für die entsprechenden relativen Attribute dx und dy, {{Phab|Bugzilla=33245}}). Die Koordinaten-Attribute x / y (bzw. dx / dy) dürfen jeweils nur einen Wert enthalten, sonst werden sie angezeigt, als ob beide Werte gleich Null wären. (Das hat zur Folge, dass bei <code>y="0"</code> die Zeichen oberhalb des Bildrandes erscheinen und abgeschnitten werden, oder unter Umständen ganz verschwinden, siehe [[:Datei:Irregular Satellites - Orbits - en.svg|weiteres Bsp.]])

Unter '''Inkscape''' kann diese entsprechende „Text-Manipulation“ mit der Funktion: ‹Text› – ‹Manuelle Unterschneidung entfernen› einfach egalisiert werden. [[Datei:Inkscape icons text unkern.svg|18px]]

Zur Korrektur bei größeren Quelltext bietet sich auch ein [[RegExp]]-fähiger Texteditor an. Wenn die erste Nummernangabe die maßgebliche ist (also nur für zusammenhängenden Text, weit auseinanderliegender Text müsste entweder händisch neu positioniert oder im Texteditor per zwischengefügter <code><tspan</code>'s getrennt werden), könnte der Suchausdruck (z. B. bei [[Notepad++]]) folgendermaßen aussehen:
:<code>( [xy]="[-0-9.]*)[, ][-0-9., ]*"</code> ⇒ <code>\1"</code>

Als weitere – aber eher seltene – Ursache (evtl. in Verbindung mit [[ChemDraw]]) kommt ein Verhalten bei horizontal ausgerichteten Text (<code>middle/end</code>) mit <code>tspan</code>-Elementen in Frage. Diese (bis auf das Letzte) dürfen keine absoluten <code>x</code>-Werte enthalten, da ansonsten das '''<code>text-anchor</code>'''-Attribut ignoriert wird ([[phab:T97233]] – wahrscheinlich gilt das Gleiche für vertikal ausgerichteten Text).

{{Absatz}}

=== Die Abstände von Buchstaben stimmen nicht ===
{{tracked|T36947|Open}}
[[Datei:Fonttest-Kerning.svg|mini|Alle Textschnipsel sollten gleich dargestellt werden]]

Der MediaWiki-Renderer macht manchmal Fehler bei der Berechnung von Buchstabenabständen. Dabei sind besonders solche Buchstabenfolgen betroffen, bei denen in der zu Grunde liegenden Schrift eine [[Unterschneidung (Typografie)|Unterschneidung]] definiert ist ({{Phab|Bugzilla=34947}}).
Der Effekt ist umso ausgeprägter, je kleiner die Schrift definiert wurde.

Der Effekt kann verhindert werden, wenn vor dem <code><text></code>-Element Grafikelemente wie <code><rect></code> und <code><line></code> aufgerufen werden.[Beispiel?]

Eine besondere Variante ist, im Text-Element <code><tspan></code> mit vorgestelltem Leerzeichen einzufügen.[Beispiel?] Eventuell wird auch die Position des Textes verschoben. Dies kann mit <code>dx</code> und <code>dy</code> innerhalb von <code><tspan></code> korrigiert werden.

Ein weiteres Gegenmittel ist, statt
<syntaxhighlight lang="xml">
<text font-size="5px">Beispieltext</text>
</syntaxhighlight>
eine größere Schriftgröße zu setzen, bei (individuell) gleichzeitiger Verkleinerung der Textdarstellung
<syntaxhighlight lang="xml">
<g transform="scale(0.1)"><text font-size="50px">Beispieltext</text></g>
</syntaxhighlight>
erzeugt eine deutlich verbesserte Platzierung der einzelnen Glyphen. Optimal scheint hier ein Wert >72px (siehe Grafik rechts).

Lädt man die nebenstehende Testgrafik direkt in einem Browser, der SVG darstellen kann, kann man übrigens gut sehen, dass viele Browser die Unterschneidungsdefinitionen und [[Ligatur (Typografie)|Ligaturen]] aus den Schriftdateien nicht berücksichtigen.

* Als weitere bizarre Ursache kommen (jegliche Art von per <code>transform</code>) stark herunterskalierter Grafik-Objekten in Frage, die im Quellcode vor dem Text liegen ({{Phab|Bugzilla=63703}}). Der Effekt ist umso ausgeprägter, je kleiner das Objekt skaliert wurde.
* Für einen ähnlichen Effekt können auch die als Liste gesetzten <code>x-, y-</code>Positionsangaben für Textzeichen in Frage kommen, ''siehe obigen Abschnitt: „[[#Die Schrift ist an eine andere Position verschoben]]“.''
* Zudem hat sich gezeigt, dass <code>tspan</code>-Elemente mit einem Zeilenumbruch im XML-Code den Bug abmildern.[[phab:T36947#3239079|[r]]] Also ist es nicht ratsam diese Einrückung in betr. SVG (mit einem Cleaner o.dgl.) zu entfernen.
* Bei unerwarteten Größen, ''siehe obigen Abschnitt: „[[#Warum wird meine Lieblingsschrift nicht angezeigt?]]“''

Anm.: Die Eigenschaft ‘<code>letter-spacing</code>’<ref>[[W3C]] SVG Text: [//www.w3.org/TR/SVG/text.html#LetterSpacingProperty Spacing properties – letter-spacing]</ref> wird unterstützt, von manchen modernen Browsern wie Firefox jedoch nicht ([//bugzilla.mozilla.org/show_bug.cgi?id=371787 Mozilla Bug 371787]<ref>SVG in Firefox: [//developer.mozilla.org/en-US/docs/SVG_in_Firefox Element implementation status]</ref>).

=== Hoch- und tiefgesteller Text ===
<gallery class="float-right" widths="28" heights="28" caption="Inkscape-Icons">
Inkscape icons text superscript.svg
Inkscape icons text subscript.svg
</gallery>
[[Datei:Osmosis hydraulic pressure-de.svg|mini|Text-Shifting mittels dy]]

Die aus HTML und CSS bekannte Grundlinienverschiebung ([//www.w3.org/TR/SVG/text.html#BaselineShiftProperty baseline-shift]) '''Sup'''erscript and '''Sub'''script wird vom Renderer<ref>{{Phab|Bugzilla=5792}}</ref> und ebenfalls von aktuellen Browsern wie Firefox<ref>[//bugzilla.mozilla.org/show_bug.cgi?id=308338 Mozilla Bug 308338]</ref> und Internet Explorer 11<ref>[http://msdn.microsoft.com/en-us/library/gg558060(v=vs.85).aspx msdn.microsoft]</ref> nicht unterstützt. Alternativ gibt es jedoch in SVG die zugrundeliegende Buchstaben-Unterschneidung mittels vertikalem Versatz über die Text-Attribute '''<code>y</code>'''<ref>http://www.w3.org/TR/SVG/text.html#TextElementYAttribute – gleich <kbd>y</kbd>-Koordinate in der <code>translation</code> Angabe</ref> oder relativ '''<code>dy</code>'''.<ref>http://www.w3.org/TR/SVG/text.html#TextElementDYAttribute </ref> Inkscape hat hier ebenfalls GUI-Unterstützung mittels [[Datei:Inkscape icons text vert kern.svg|18px]].

<syntaxhighlight lang="xml">
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="160">
<text y="60" x="20" style="font-size:24px; font-family:sans-serif">
Normaler Text<tspan style="font-size:65%; baseline-shift:sub">tiefgestellter Text</tspan>
</text>
<text y="120" x="20" style="font-size:24px; font-family:sans-serif">
Normaler Text<tspan dy="5" style="font-size:65%">tiefgestellter Text</tspan>
</text>
</svg>
</syntaxhighlight>

Hier wurde <syntaxhighlight lang="css" inline>style="baseline-shift:sub"</syntaxhighlight> durch einen simplen vertikalen (relativen) Versatz <code>dy="5"</code> ersetzt.<ref>Die 5 Pixel im Beispiel ergeben sich abgerundet durch die Rechnung ''Schrifthöhe * 33 %'', d.h. ''24 px * 65 % * 33 % = 5.148 px''</ref>

(Anm.: Normalerweise können diese Koordinaten-Attribute eine Liste von Werten enthalten, der Renderer unterstützt jedoch nur einen Einzel-Wert, siehe ''[[#Warum ist mein Text verschoben (verschwunden)?]]''.)
{{Absatz}}

=== An Pfad ausgerichteter Text ===
<gallery class="float-right" mode="packed">
File:Fort_Hall_Location_Map.svg|textPath
File:Fort_Hall_Location_Map_Path.svg|Workaround Text in Pfadflächen konvertiert
File:Fort_Hall_Location_Map_Text.svg|Workaround mit geraden gedrehten Text
</gallery>
Das entspr. Element '''[[b:SVG/ Text als Graphik #Element textPath|<code><textPath></code>]]''' wird derzeit nicht unterstützt ({{Phab|Bugzilla=9420}}).

Als Workaround bietet sich eine Ausrichtung der einzelnen Textzeichen an (z. B. mit Adobe Illustrator automatisch möglich), oder wenn der Textpfad eine Gerade ist, kann der Text auch normal über das Attribut <code>[[b:SVG/_Transformationen|transform]]</code> positioniert/rotiert werden. Als letztes aber adäquates Mittel bietet sich an den Text selbst in Pfade umzuwandeln (was jedoch eine Reihe von Nachteilen mit sich bringt).
{{Absatz}}

== Warum hat mein Bild durch den Pfad feine Linien? ==

Auch wenn zwei Pfad-Knoten genau an derselben Stelle sind, erscheint beim Renderer (in bestimmten Auflösungen) eine Spalte (''hairline'', jedoch auch in manchen aktuellen Browsern {{Phab|Bugzilla=18936}}). Hier gibt es in Inkscape eine Funktion ‹Pfad›–‹Vereinigung› ({{Taste|Strg}}+{{Taste|+}}), welche die übereinanderliegenden Knoten zu einem Knoten vereint. [[Datei:Inkscape icons path union.svg|18px]] Selbst wenn sich zwei Objekte überlappen, kann dieser Effekt auftreten, sobald der Bereich in der skalierten Renderung 1px unterschreitet.
{| class="centered"
|[[Datei:SVG 3 paths.svg|mini|240px|Die Quadrate sind gänzlich aneinander.]]
|[[Datei:SVG 3 paths.svg|mini|241px|Selbes Bild 1px größer.]]
|}

Anm.: Der Bug scheint nach einem Update abgeschwächt worden zu sein, so dass dieser nur etwas bei ungeraden Auflösungen auftritt.

== Warum wird meine SVG nicht angezeigt? ==

Vermutlich hast du den Verweis auf eine Bitmapgrafik in der SVG vergessen. Solche mag der Renderer gar nicht, sie müssen unbedingt entfernt werden, d. h. nicht nur unsichtbar sein. Wenn du also eine Pixelgrafik nachzeichnest oder als Referenz nutzt, denke immer daran, diese vor dem Hochladen aus der SVG zu löschen.

== Ich habe eine Bitmapgrafik direkt eingebunden, aber es funktioniert trotzdem nicht ==

Einbinden heißt im Unterschied zu Verweisen (''siehe vorherige Frage''), dass der Code für die Bitmapgrafik direkt in der SVG-Datei abgespeichert wird. Leider ist auch das keine Garantie dafür, dass die Datei korrekt angezeigt wird. Folgende Fehlerquellen sind möglich (vermutlich keine vollständige Liste):

# Das eingebundene Bitmap ist eine JPEG-Datei. Der Renderer kann aber nur PNG-Dateien darstellen.
# '''Nur für Grafiken, die mit Inkscape erstellt wurden:''' Wenn man das Verhältnis von Höhe zu Breite eines Bitmaps ändert, speichert Inkscape das auf eine Art und Weise, die nicht standardkonform ist. Andere Renderer, die korrekt arbeiten, zeigen deshalb möglicherweise das unverzerrte Bild. Um das Auftreten eines Fehlers zu vermeiden, sollte man auf das Bitmap nach dem Einbetten als allererstes den Befehl ''Objekt → Gruppieren'' anwenden, und nur diese Gruppe verschieben und skalieren.

== Kann ich die Darstellung mit CSS steuern? ==

[[Datei:Test only.svg|mini|hochkant=1.5|Systematischer Test verschiedener CSS-Methoden]]

Während der Eintrag von <code>style</code>-Eigenschaften in Objekte und Gruppen ein zentraler Mechanismus für die Darstellung von SVGs ist, ist die Verwendung von eingebetteten [[Cascading Style Sheets|CSS]] am Beginn des Dokuments mit Vorsicht zu genießen. So unterstützt der MediaWiki-Renderer u.a. keine CSS Kind-Selektoren (''child selector'' – {{Phab|Bugzilla=41423}}).

Bei fehlerfreier Funktion des Renderers sollten in der Abbildung rechts alle Beispiele gleich aussehen (also sechs rote Kreise, sechs blaue Quadrate und der Text im gleichen Stil).

[Ggf. sind hier weitere Beispiele angebracht, da das Bsp. im Endeffekt nur einen Bug zeigt]

Anm.: Seit libRSVG 2.36 muss das <code>[[b:SVG/_Grafiken_formatieren#Verwendung_des_Elementes_style|'''style''']]-</code>Element eine <code>type="text/css"</code> Notation enthalten, entgegen der ausdrücklich als „optional“ gegebenen Empfehlung des W3C ([[phab:T68672]]).
{{Absatz}}

== Wie kann ich die Hintergrundfarbe setzen? ==

SVG verfügt weder über einen Hintergrund noch über Hintergrundfarbe als Eigenschaft der Grafik (im Gegensatz zu CSS in HTML, das Gleiche gilt für Text). Ein farbiger, nicht-transparenter Hintergrund wird daher bei SVG durch ein farbiges Rechteck in Größe der Grafik erreicht.
<syntaxhighlight lang="xml">
<rect width="100%" height="100%" fill="#A8F"/>
</syntaxhighlight>
Anm.: Mit Hilfe des Online-Tools „[http://inkfirmary.48design.de/ <nowiki>in[k]firmary</nowiki>]“ (von [[Benutzer:Connum]]) lässt sich unter anderem optional, automatisch eine Hintergrundfarbe festlegen.

== Ein verkleinertes Vorschaubild sieht ganz anders aus als das Originalbild (semi-fixed) ==

Der Renderer hat Schwierigkeiten, skalierte Vorschaubilder zu produzieren, wenn '''Filter'''-Funktionen verwendet werden, wie z. B. bei bestimmten Weichzeichnern. So kann z. B. die Breite und Position von GaussianBlur-Filtern (''feGaussianBlur'') mit der Größe des PNG-Vorschaubildes deutlich variieren, oder bei kleinen Thumbnails wird die Filterfunktion gar nicht mehr ausgeführt. Beispielsweise ist in nachfolgender Galerie fünfmal die gleiche SVG-Datei dargestellt, mit jeweils einer unterschiedlichen Renderingauflösung. Bei fehlerhaftem Rendering wird erst ab der Auflösung von 50 Pixel oder mehr die Abbildung korrekt dargestellt.

{| class="wikitable centered"
! 46 Pixel !! 48 Pixel !! 60 Pixel !! 80 Pixel !! 100 Pixel
|-
| [[Datei:Audacity Logo.svg|46px]] || [[Datei:Audacity Logo.svg|48px]] || [[Datei:Audacity Logo.svg|60px]] || [[Datei:Audacity Logo.svg|80px]] || [[Datei:Audacity Logo.svg|100px]]
|}

Insgesamt sollte der Einsatz von Filterfunktionen sehr vorsichtig erfolgen. Dabei sollte auch immer bedacht werden, dass bei der direkten Anzeige von SVGs im Browser noch weitere Fehler auftauchen können, da nicht alle diese überhaupt darstellen können.

Anm.: Der Fehler tritt vor allem bei einem niedrigem Wert auf (wenn im Ergebnis unter einem Pixel, [//bugzilla.gnome.org/show_bug.cgi?id=605875 Gnome Bug 605875], bearbeitet in libRSVG 2.40.9, Update des MediaWiki-Renderers notwendig [https://download.gnome.org/sources/librsvg/2.40/librsvg-2.40.9.news])

== Warum wird mein Füllmuster nicht richtig angezeigt? ==

Der Renderer ist leider nur bedingt in der Lage Füllmuster, folgend ''Pattern'' genannt, korrekt wiederzugeben (vor allem in der Skalierung, [[phab:T20463]]).

: ''Tipps als Alternative'': Erzeuge nur ein einziges „Urmuster“, dann vervielfache es durch Klonen, bis es die ganze Fläche des zu musternden Objektes überdeckt. Dann verwende die Silhouette des Objektes als Ausschneidepfad.
: ''Als weiterer Workaround'' für Fortgeschrittene: bietet sich folgende Möglichkeit an, wenn man das Pattern nochmal in ein weiteres Pattern setzt (ein einfaches Viereck reicht) hat man meistens das gewünschte Resultat (Erfahrungen können hier auf der Diskussionsseite gerne weitergegeben werden).

Falls Pattern bei mehrfacher Verwendung (des gleichen Pattern) gänzlich '''verschwunden''' sind, ist eine mögliche Ursache eine Unordnung der Definition (defs-Element). Das bedeutet, dass der Editor intern ''Clone'' der verwendeten Pattern erstellt (nur mit geänderten Positionen) und diese womöglich im Dokumenten-Baum vor dem Original gesetzt wurden (was nicht schön ist, aber auch keinen Verstoß darstellt). Diesen Umstand kann der MediaWiki-Renderer nicht verarbeiten, daher ist der '''Fix''', einfach die ''Clone'' im Dokument nach dem ''Original'' zu setzen. ''Beispiel-[[:Datei:Grundriss Burg Hageneck.svg]]'' (no bug-report yet found)

== stroke-dasharray ==

'''[[phab:T32033]]''': Die [[:Datei: EKG-Reto 001.svg]] zeigt ein Füllmuster mit <code>stroke-dasharray</code> fälschlich als volle Linien (etwas weniger, je größer die Vorschaugröße).
<gallery showfilename perrow="2" width="112px">
EKG-Reto 001.svg|benutzt '''Leerzeichen''' als Trennzeichen (nicht unterstützt)
EKG-Reto 001 BugSolved.svg|verwendet Komma als Separator (''Workaround'')
</gallery>

[[RegExp]]-Ersetzung (mit nur 2 Werten):
* <code>stroke-dasharray="(\d*\.?\d*) (\d*\.?\d*)"</code> ⇒ <code>stroke-dasharray="\1,\2"</code>

== Animation ==

[[Scalable Vector Graphics#Animation|SVG-Animationen]] werden vom Wiki-Renderer nicht unterstüzt, jedoch können sie mit einem Direktlink für Browser zugänglich gemacht werden.
: Beispiele: [[commons:Category:Animated SVG]]

== Behobene Bugs ==

=== Marker (fixed) ===
Für Diagramme (Skizzen, Graphen und Flowchart artige) werden häufig wiederkehrende sogenannte Markierungssymbole wie Pfeile mittels [[b:SVG/ Markierungen|'''<samp>marker</samp>'''-Element]] verwendet. Der MediaWiki-Renderer versteht diese ganz gut. Allerdings mit Ausnahme des mittigen Marker, dem sog. <code>marker-mid</code> in Verbindung mit <code>orient="auto"</code>. Hier kann es zum völligen Abbruch des Renderns weiterer Elemente der Grafik kommen ([[phab:T117530]]).

=== Pfeile (Markierungen) sind verdreht (fixed) ===
[[Datei:Fenster (Fenstersystem) de.svg|mini|Fehlerhafte Version in der Versionsgeschichte]]

Hier gibt es eine uneindeutige Besonderheit bei sogenannten kubischen Bezierkurven (''bezier curves'') auf.<ref>SVG Tutorial [http://svg.tutorial.aptico.de/start3.php?knr=10&kname=Pfade&uknr=10.4&ukname=C%20und%20c%20-%20kubische%20Bezierkurven 10.4 C und c – kubische Bezierkurven]</ref> Wenn diese „unvollständig“ sind (auch bei „fast“ geraden Linien [[:Datei:Types of relation ti.svg|siehe Bsp.]]), werden diese nicht nach der Pfadrichtung ausgerichtet (sondern verbleiben in ihrer „Normalposition“).

Grund ist der, dass bei kubischen Bezierkurven der letzte Koordinatenpunkt (Endpunkt) sich anscheinend vom Vorletzten unterscheiden muss um eine Richtung (für den Marker) feststellen zu können. Nun könnte man einfach per Texteditor den Koordinatenpunkt ändern, allerdings ist es wohl leichter diesen über einen GUI-Editor (bei Inkscape über {{Taste|F2}}) neu zu setzen. Erkennbar ist dies daran, dass beim betreffenden Endknotenpunkt der Bogen-Anfasser (''control point'') fehlt, daher kann dieser einfach mittels gedrückter {{Taste|Shift}}-Taste (und Maus) gesetzt werden. [[Datei:Inkscape icons show node handles.svg|18px]] (Daher kann der Bug auch aufgehoben, wenn man einen spiegel-/punkt-symmetrischen Pfad dreht/spiegelt und einen gespiegelten Marker verwendet ohne die Pfaddaten wirklich verändert zu haben.)

Als weitere Ursache können eng aneinanderliegende Knotenpunkte (daher nicht offensichtliche) in Frage kommen.

Anm.:
: Der Bug ist ab '''librsvg-2.40.10 gefixt''' ([//bugzilla.gnome.org/show_bug.cgi?id=476507 GNOME Bug #476507]) <s>Die Tatsache, dass Firefox und Inkscape solchen Code (auf eine Weise) interpretieren, lässt jedoch den Umstand einer ungenauen W3C-Spezifikation und Konformität offen.</s>
: Aktuell tritt dieses Verhalten immernoch im Chrome (65) auf.

== Info ==
<div style="background:#EFE;border:1px dashed #9E9;padding:2pt;">{{Info}} Mit der Aktualisierung vom 24. Oktober 2012 (''Serverupdate'' auf Ubuntu 12.04) wurden die Server, die für die Erstellung der Vorschaubilder zuständig sind ''(Imagescaler)'', mit dem entsprechend aktualisierten Programm libRSVG (2.36) umgestellt. Auf der einen Seite sollten damit so manche Fehler behoben sein, auf der anderen Seite kann es auch zu neuen Fehlern kommen. Daher ist die Liste ggf. zu aktualisieren (wikitech-Mailingliste: [[mailarchive:wikitech-l/2012-October/063607.html|''New Imagescaler disto/packages'']]) Anm.: Evtl. entfernte Bugs können in der [[:Special:PermanentLink/109702605?title=Wikipedia:Probleme mit SVGs|Version vom 24. Oktober 2012]] eingesehen werden.</div>

== Siehe auch ==
{{Commons|Help:SVG/de|suffix=ausführliche deutschsprachige Einführung in SVG}}
{{meta|SVG image support|3= MetaWiki (engl. historical information)}}

== Einzelnachweise ==
<references />

[[Kategorie:Wikipedia:FAQ]]
[[Kategorie:Wikipedia:Bilder]]

[[es:Wikiproyecto:Ilustración/Taller gráfico/Problemas típicos con SVG en Wikimedia]].

Wikipedia:Probleme mit SVGs - Versionsgeschichte

imported>Crazy1880: Vorlagen-fix (Commons)