Wikipedia:Probleme mit SVGs
|
Frequently Asked Questions zur SVG-Erstellung für die Wikipedia
Bei der Darstellung von SVG-Dateien gibt es einige wiederkehrende Probleme. Diese rühren meist daher, dass zur Anzeige die SVG-Dateien meist 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 die Grafikwerkstatt. Allgemeine Fragen zu Inkscape werden auch in der Inkscape-FAQ beantwortet. Neue Antworten können über diesen Link eingetragen werden. |
Siehe auch
- Meta:SVG image support (engl.)
- Commons:Help:SVG (derzeit nur engl., frz.)
Wieso gibt es überhaupt Probleme?
SVG-Dateien werden in den meisten Fällen nicht direkt angezeigt. Immer dann, wenn eine Grafik auf einer Seite eingebunden wird, wird diese durch MediaWiki in PNG-Dateien umgewandelt. Der Grund dafür ist, dass einige Browser SVG-Dateien nicht direkt anzeigen und fast alle sie nicht skalieren können. Für das Rendering wird eine Programmbibliothek namens librsvg verwendet. Dies ist dieselbe, die auch der Bildbetrachter Eye of Gnome benutzt, ein Standardbestandteil von Betriebssystemen mit einer GNOME-Grafikoberfläche, wie z. B. die Linux-Distribution Ubuntu. Wer diese zu Hause benutzt, kann sich auch schon vor dem Hochladen informieren, ob seine Grafiken richtig dargestellt werden. (Mehr dazu auf Wikipedia:WikiProjekt SVG#Dateien zu Hause testen)
Warum wird mein Füllmuster nicht angezeigt?
Der Renderer ist leider nicht in der Lage, Füllmuster wiederzugeben. Es bleibt nichts übrig, als sie von Hand zu zeichnen. Tip: 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.
Warum wird meine Lieblingsschrift nicht angezeigt?
Der Renderer hängt davon ab, 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 WikiProjekt_SVG: Schriftarten in extrahierten Bildern.
Zu beachten ist auch, dass die installierten Schriften nicht einheitlich 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 Anschauung der Unterschiede bietet diese Grafik.
Warum wird mein Text nicht gerendert?
Man darf keine Textrahmen (in Inkscape "Fließtext" genannt) verwenden, sondern "nur" einfache Texte, die man in Inkscape mit einem einfachen Klick setzt und sofort lostippt. 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 umgebrochen werden.
Auf SVG-Dateiebene werden in diesem Fall die ab SVG-Version V1.2 vorgesehenen englisch Flowing-Text-And-Graphics [1] Elemente in der Form
<flowRoot
...>
...
</flowRoot>
abgelegt. 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. In diesen Fällen ist es am einfachsten, die betreffende SVG-Datei in einem Texteditor zu öffnen und alle flowRoot-Elemente zu löschen.
Warum werden anstelle von Text nur schwarze Balken angezeigt?
Siehe Warum wird mein Text nicht gerendert?.
Die Schrift ist an den linken Bildrand verschoben
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 angibt. Das sieht dann etwa so aus:
<text
x="50 70 90 110"
y="50 52 48 46"
style="font-size:24px;font-family:Sans-serif">efgh</text>
Der Wikipedia-Renderer versteht diese Syntax nicht. x und y dürfen jeweils nur einen Wert enthalten, sonst werden sie angezeigt, als ob beide Werte gleich Null sein. (Das hat zur Folge, dass bei y=0 die Zeichen oberhalb des Bildrandes erscheinen und abgeschnitten werden.)
Die Abstände von Buchstaben stimmen nicht
Der Wikipedia-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 definiert ist.
Der Effekt ist umso ausgeprägter, je kleiner die Schrift ursprünglich definiert wurde. Damit lässt sich auch ein Gegenmittel angeben: Statt
<text font-size="5">Beispieltext</text>
erzeugt die spätere Verkleinerung einer ursprünglich großen Textdarstellung
<g transform="scale(0.25 0.25)"><text font-size="20">Beispieltext</text>
eine deutlich verbesserte Plazierung der einzelnen Glyphen.
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 Ligaturen aus den Schriftdateien nicht berücksichtigen.
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, das 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.
Warum werden Transparenzen der SVG als weißer Hintergrund dargestellt?
Das liegt in der Regel nicht an einem SVG-Fehler, sondern an PNG-Renderfehlern deines Browsers. Der Microsoft Internet Explorer kann bis einschließlich der Version 6 Transparenzen in PNG-Dateien nicht richtig darstellen.
Folgendes Beispiel zeigt ein svg-Bild (c-Symbol), das teilweise transparent ist, vor einem grünen Hintergrund. Das svg wird als PNG ausgeliefert. Die unterschiedliche Darstellung in IE und Firefox sind auf dem Bild rechts zu sehen:
|
Kann ich die Darstellung mit CSS steuern?
Während der Eintrag von style-Eigenschaften in Objekte und Gruppen natürlich der zentrale Mechanismus für die Darstellung von SVGs ist, ist die Verwendung von eingebetteten CSS-Stylesheets am Beginn des Dokuments ein wahres Glücksspiel. Welche Mechanismen vom Renderer unterstützt werden, lässt sich eigentlich nur durch Ausprobieren feststellen.
Wie kann ich die Hintergrundfarbe setzen?
SVGs verfügen weder über einen Hintergrund noch über Hintergrundfarbe als Eigenschaft der Grafik. Ein farbiger, nicht-transparenter Hintergrund wird daher bei SVGs durch ein farbiges Rechteck in Größe der Grafik erreicht.
Ein verkleinertes Vorschaubild sieht ganz anders aus als das Originalbild
Der Renderer hat Schwierigkeiten, skalierte Vorschaubilder zu produzieren, wenn Filterfunktionen verwendet werden. So kann z. B. die Breite und Position von GaussianBlur-Filtern mit der Größe des PNG-Vorschaubildes deutlich variieren, oder bei kleinen Thumbnails wird die Filterfunktion gar nicht mehr ausgeführt.
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.
Einzelnaachweise
- ↑ Flowing text and graphics, W3 SVG1.2 Draft