SVG/CSS-Fontproblem
Martin
- css
0 Björn Höhrmann0 martin
Guten Abend,
ich habe ein SVG mit eingebetteter Schriftart (es ist Verdana, ich habe sie Verda umbenannt) und alles funktioniert bestens. Eingebettet sind nur die Zeichen A, B und C. Ein D darf also nicht angezeigt werden.
Wenn ich die Schriftartdefinition in ein CSS auslagere, findet der Adobe SVG-Viewer meine Verda nicht mehr. Verda wird durch eine andere Schriftart ersetzt, deshalb wird auch das D angezeigt.
Was mache ich da falsch?
Vielen Dank für Eure Hilfe
Hier der SVG-Quelltext der eingebetteten Version (geht):
<?xml version="1.0" encoding="utf-8"?>
<svg width="150" height="50" viewBox="0 0 25 15">
<style type="text/css">
<![CDATA[
@font-face{font-family:Verda;src:url("data:;base64,\
T1RUTwACACAAAQAAQ0ZGIGhD0d8AAAAsAAACd2NtYXD/xwB4AAACpAAAACwBAAQCAAEBAQhWZXJk\
YW5hAAEBATP4GwH4GAQl/DscC5McCAEFHqAASIKBJf+Lix6gAEiCgSX/i4sMB/cRD4wQ9xURk/kD\
EgABAQEwVmVyZGFuYSBpcyBhIHRyYWRlbWFyayBvZiBNaWNyb3NvZnQgQ29ycG9yYXRpb24AAAEA\
IgIABAIAAQAfAE8BKgHi95QWHAYAHAYAHPoABxz6gPcUFRwFABwFABz7AAYOIBwFXhb7Zwb7Jvgz\
Bf0YBvsm/DMF+10G+LIcBdEF95wG9xD+HBX7mflv+5r9bwUOJBwFK/heFUF9Sm9SHm9SZV1cZlNf\
TmxIeAh4SDWCJBv8pBwF0fhNBvcB3IeDwR/Bg796vHLCbrJnpF4IpF6XVUwaRHlPZ1oeZ1lbY09t\
CIMH8HbaX8VICMVHqDUkGvvh+TMVr4Wpf6Qef6R4n3CabJ1lll6QCI9eVI1JG/uA/EL3lAbJvI6S\
sB+wka2Yqp+qn6KlmKsImKqRsbYa9xP9OxXHgrt5rh55rmqpXKRrnGSWXpAIkF1TjUob+8v8vvea\
BuLSkJTCH8KUuZuuo7Clp6mcrAicrJS2wBoOPhwFRvcAFWZ7anxufW19ZHxbfGJ+X4BcgwiCW1aG\
Uhv7ACmaqjMfMqk+ukrMS8pZ3GftCGfsefcG9xUa9w+c9wGu7B6u7L3czM7KzNi85a0IreTvnPcB\
G9vbgXjbH9p45GnsWgj7f3wHOdA6vTqqCKo6NZsvG0BHf3NPH05yVWVcWF1ZZ0xyPwhxPn4zJxoi\
mTGoQB6nQK9NuFy6WsFmynQIc8nNf9Ab6uWbrN4f3qzZvNTMCJkGDhwIABQcBeMVAAAAAAEAAAAD\
AAAADAAEACAAAAAEAAQAAQAAAEP//wAAAEH////AAAEAAAAA");}
]]>
</style>
<title>ABC - mehr nicht</title>
<desc>keine weiteren Buchstaben enthalten</desc>
<text transform="matrix(1 0 0 1 0 12)"><tspan font-family="Verda">ABCD</tspan></text>
</svg>
Hier der SVG-Quelltext der CSS-Version (geht nicht):
<?xml version="1.0" encoding="utf-8"?>
<?xml:stylesheet type="text/css" href="abc.css"?>
<svg width="150" height="50" viewBox="0 0 25 15">
<title>ABC - mehr nicht</title>
<desc>keine weiteren Buchstaben enthalten</desc>
<text transform="matrix(1 0 0 1 0 12)"><tspan font-family="Verda">ABCD</tspan></text>
</svg>
Hier der CSS-Quelltext (Kopie des Ausschnitts aus dem SVG):
@font-face{font-family:Verda;src:url("data:;base64,\
T1RUTwACACAAAQAAQ0ZGIGhD0d8AAAAsAAACd2NtYXD/xwB4AAACpAAAACwBAAQCAAEBAQhWZXJk\
YW5hAAEBATP4GwH4GAQl/DscC5McCAEFHqAASIKBJf+Lix6gAEiCgSX/i4sMB/cRD4wQ9xURk/kD\
EgABAQEwVmVyZGFuYSBpcyBhIHRyYWRlbWFyayBvZiBNaWNyb3NvZnQgQ29ycG9yYXRpb24AAAEA\
IgIABAIAAQAfAE8BKgHi95QWHAYAHAYAHPoABxz6gPcUFRwFABwFABz7AAYOIBwFXhb7Zwb7Jvgz\
Bf0YBvsm/DMF+10G+LIcBdEF95wG9xD+HBX7mflv+5r9bwUOJBwFK/heFUF9Sm9SHm9SZV1cZlNf\
TmxIeAh4SDWCJBv8pBwF0fhNBvcB3IeDwR/Bg796vHLCbrJnpF4IpF6XVUwaRHlPZ1oeZ1lbY09t\
CIMH8HbaX8VICMVHqDUkGvvh+TMVr4Wpf6Qef6R4n3CabJ1lll6QCI9eVI1JG/uA/EL3lAbJvI6S\
sB+wka2Yqp+qn6KlmKsImKqRsbYa9xP9OxXHgrt5rh55rmqpXKRrnGSWXpAIkF1TjUob+8v8vvea\
BuLSkJTCH8KUuZuuo7Clp6mcrAicrJS2wBoOPhwFRvcAFWZ7anxufW19ZHxbfGJ+X4BcgwiCW1aG\
Uhv7ACmaqjMfMqk+ukrMS8pZ3GftCGfsefcG9xUa9w+c9wGu7B6u7L3czM7KzNi85a0IreTvnPcB\
G9vbgXjbH9p45GnsWgj7f3wHOdA6vTqqCKo6NZsvG0BHf3NPH05yVWVcWF1ZZ0xyPwhxPn4zJxoi\
mTGoQB6nQK9NuFy6WsFmynQIc8nNf9Ab6uWbrN4f3qzZvNTMCJkGDhwIABQcBeMVAAAAAAEAAAAD\
AAAADAAEACAAAAAEAAQAAQAAAEP//wAAAEH////AAAEAAAAA");}
Wenn ich die Schriftartdefinition in ein CSS auslagere, findet der Adobe SVG-Viewer meine Verda nicht mehr.
In erster Instanz klingt das doch sehr nach einem Bug, oder? Du hast natürlich unterlassen, zu sagen, wie du welche Version des ASV einsetzt, sonst hätte man vielleicht noch mehr dazu sagen können.
Verda wird durch eine andere Schriftart ersetzt, deshalb wird auch das D angezeigt.
Wie kommst du auf die Idee, es dürfe kein 'D' angezeigt werden? CSS-Implementationen müssen sich eine entsprechende andere Schriftart heraussuchen und mittels dieser Schriftart das 'D' anzeigen, nur wenn keine Schriftart ein 'D' beeinhaltet, sollte ein Ersatzzeichen angezeigt werden.
Was mache ich da falsch?
Dazu kann man zumindest mal was sagen.
Hier der SVG-Quelltext der eingebetteten Version (geht):
<?xml version="1.0" encoding="utf-8"?>
<svg width="150" height="50" viewBox="0 0 25 15">
Das ist schon mal kein SVG-Dokument, du hast den SVG-Namensraum nicht deklariert. Das kann man sich ggf. schenken, wenn man eine SVG-DTD einbindet, aber auch das hast du versäumt.
<style type="text/css">
<![CDATA[
@font-face{font-family:Verda;src:url("data:;base64,\
Ohne MIME-Type hat der Benutzeragent keine Ahnung, wie er die hier eingebundene Bytesequenz als Schriftart interpretieren soll.
Hier der SVG-Quelltext der CSS-Version (geht nicht):
<?xml version="1.0" encoding="utf-8"?>
<?xml:stylesheet type="text/css" href="abc.css"?>
Eine Verarbeitunganweisung mit dem Ziel "xml:stylesheet" gibt es nicht, wenn du so ein Stylesheet verknüpfen willst, musst du schon 'xml-stylesheet' verwenden. Ich schätze mal, das wird dein Fehler sein.
welche Version des ASV
Adobe SVG Viewer 3.0, Build 76
Gibt es denn Unterschiede in der Anzeige und Interpretation von SVG-Dokumenten durch verschiedene Plugins? Das würde ja dem W3C-Konzept von wohlgeformten XML-Dokumenten (im Gegensatz zu HTML mit den bekannten Darstellungsunterschieden zwischen den Browsern) zuwiderlaufen!
Wie kommst du auf die Idee, es dürfe kein 'D' angezeigt werden? CSS-Implementationen müssen sich eine entsprechende andere Schriftart heraussuchen und mittels dieser Schriftart das 'D' anzeigen, nur wenn keine Schriftart ein 'D' beeinhaltet, sollte ein Ersatzzeichen angezeigt werden.
Keine Ahnung, was das W3C dazu sagt - oder ob es sich hier um eine andere Interpretation von Adobe handelt (s. o.).
Ich halte es aber schon für sinnvoll, wenn ich sage, daß genau diese Schriftart verwendet werden soll und dann ein Zeichen nicht vorhanden ist, dieses nicht einfach in einer anderen Schriftart darzustellen.
Das ist schon mal kein SVG-Dokument, du hast den SVG-Namensraum nicht deklariert. Das kann man sich ggf. schenken, wenn man eine SVG-DTD einbindet, aber auch das hast du versäumt.
Adobe sieht es anscheinend nicht so eng...
<style type="text/css">
<![CDATA[
@font-face{font-family:Verda;src:url("data:;base64,\
Ohne MIME-Type hat der Benutzeragent keine Ahnung, wie er die hier eingebundene Bytesequenz als Schriftart interpretieren soll.
Den Abschnitt habe ich aus einer vom Illustrator generierten SVG-Datei entnommen. Muß ich jedes SVG-Dokument mit verschiedenen Viewern ausprobieren, oder kann ich davon ausgehen, daß wenn es bei mir mit dem ASV läuft, bei anderen Plugins keine Probleme auftauchen?
Hier der SVG-Quelltext der CSS-Version (geht nicht):
<?xml version="1.0" encoding="utf-8"?>
<?xml:stylesheet type="text/css" href="abc.css"?>
Eine Verarbeitunganweisung mit dem Ziel "xml:stylesheet" gibt es nicht, wenn du so ein Stylesheet verknüpfen willst, musst du schon 'xml-stylesheet' verwenden. Ich schätze mal, das wird dein Fehler sein.
DANKE, das wars! jetzt funktioiert es auch so:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="abc.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="150" height="50" viewBox="0 0 25 15">
<title>ABC - mehr nicht</title>
<desc>keine weiteren Buchstaben enthalten</desc>
<text transform="matrix(1 0 0 1 0 12)"><tspan font-family="Verda">ABCD</tspan></text>
</svg>
Hi!
Den Abschnitt habe ich aus einer vom Illustrator generierten SVG-Datei entnommen. Muß ich jedes SVG-Dokument mit verschiedenen Viewern ausprobieren, oder kann ich davon ausgehen, daß wenn es bei mir mit dem ASV läuft, bei anderen Plugins keine Probleme auftauchen?
Was heist hier nur Plugins? Es gibt mindestens 2 fortgeschrittene SVG-Viewer vom Apache Projekt und Csiro, 2 Multinamespaceimplementierungen (Mozilla-SVG und xsmiles), einiges an SVG-Editoren sowie hunderte von Xmlparsern die das Zeug auch lesen wollen.
Also sollte man vosichtig sein. Und in erster Linie sollte also wirkliche Validität sichergestellt werden!!!
Gruß Herbalizer