Text als SVG Bild - bin etwas irritiert

[gimpi]

Ich habe in Inkscape einen Text geschrieben. Der Beispieltext heißt: "Das ist eine Überschrift".

Nun bin ich davon ausgegangen, dass in der SVG-Datei eine Menge Zahlen stehen, also Parameter, die den Text dann zeichnen.

So etwas zum Beispiel:

<path
d="m 57.780124,97.944659 0.105166,0.402831 c -0.433398,0.142676 -0.726555,0.30083 -0.879309,0.470746 -0.162653,0.172681 -0.220359,0.401776 -0.173923,0.686735 0.08292,0.533699 0.253336,1.269539 0.510981,2.211959 l 0.329398,1.20487 c 0.458919,1.67863 ....... usw.
<path

<path
d="m 57.780124,97.944659 0.105166,0.402831 c -0.433398,0.142676 -0.726555,0.30083 -0.879309,0.470746 -0.162653,0.172681 -0.220359,0.401776 -0.173923,0.686735 0.08292,0.533699 0.253336,1.269539 0.510981,2.211959 l 0.329398,1.20487 c 0.458919,1.67863 ....... usw.
<path

Ich habe angenommen, dass jeder Buchstabe mit einem eigenen Pfad <path>, gezeichnet wird.

Aber weit gefehlt:

Der Inhalt meiner SVG mit dem Schriftzug "Das ist eine Überschrift" ist sehr minimalistisch, siehe folgend:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
width="175mm"
height="22mm"
viewBox="0 0 175 22"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<g
id="layer1">
<text
xml:space="preserve"
style="font-size:14.1111px;line-height:1.25;font-family:sans-serif;stroke-width:0.264583"
x="4.3610153"
y="16.520382"
id="text2607"><tspan
id="tspan2605"
style="stroke-width:0.264583"
x="4.3610153"
y="16.520382">Das ist eine Überschrift</tspan></text>
</g>
</svg>

Ich frage mich, wie kommt das SVG Bild zustande? Woher bezieht das Bild die Anweisungen, wie die Schrift zu gestalten ist?

Könnte mich da jemand freundlicherweise aufklären?

Gruß

[Gimplyworxs]

Die Infos, die Inkscape braucht, stehen alle in der Datei.

Im oberen Abschnitt stehen z.B. die Größe des Dokuments (width="175mm" height="22mm) und die Inkscape Version (1.1)

Weiter unten steht dann drin, dass es eine Gruppe ist, die deinen Text enthält.
Da stehen Schriftart, Größe usw mit bei.
Wenn man's ein wenig netter formatiert, ist das besser zu erkennen:

Code: Alles auswählen

<svg
width="175mm"
height="22mm"
viewBox="0 0 175 22"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">

<defs
id="defs2" />

<g id="layer1">
	<text
	xml:space="preserve"
	style="font-size:14.1111px;line-height:1.25;font-family:sans-serif;stroke-width:0.264583"
	x="4.3610153"
	y="16.520382"
	id="text2607">
		<tspan
		id="tspan2605"
		style="stroke-width:0.264583"
		x="4.3610153"
		y="16.520382">Das ist eine Überschrift</tspan>
	</text>
</g>
</svg>

Mehr brauchts bei Vektorgrafiken nicht. Da muss ja nicht jedes Pixel einzeln beschrieben werden ( wie z.B. bei GIMP).

Wenn du einzelne Buchstaben sehen möchtest, müßtest du deinen Text via Pfad > Objekt in Pfad umwandeln
umwandeln. (Dann hast du zwar keinen editiebaren Text mehr, aber dafür kann er fehlerfrei angezeigt werden, auch wenn der, der's lesen soll deine Schrift(en) nicht hat.)

[gimpi]

@Gimplyworxs, erst einmal vielen Dank für Deine Antwort.

Du hast recht, meine Formatierung ist schlecht gewesen.

OK, zum Thema:

Ich wollte die Schrift Alex Brush nehmen. Aber, im Quelltext der SVG Datei steht letztlich nur die font-family, als Referenz. Also, woher bekommt das Bild diesen Font her? Eigentlich müsste der Font doch noch irgendwie eingebunden werden, in meinem Webspace. Denn, wenn ich das Bild in meine Homepage einbinde, und der Browser von dem Besucher auf meine Webseite diese Schrift nicht kennt, und er wird die Schrift mit Sicherheit nicht kennen, kann das eigentlich nicht funktionieren.

Ich habe das Problem glaube ich aber gelöst. Ich werde die Schrift zu Pfade wandeln. Dann habe ich auch die Pfade direkt in der SVG Datei, und dann liefere ich bei meiner Webseite sozusagen den Schriftstyle (Alex Brush) über die Pfade gleich mit.

Bei SVG Dateien gibt es keine Pixel; wie gesagt, die Darstellung der Schrift wird dann über die Pfade generiert, pro Buchstabe ein Pfad.

Ich werde das dann morgen mal testen.

Schönen Abend noch und Gruß
gimpi

[Gimplyworxs]

Ja, das ist das Problem mit Schriften auf der Homepage. Deshalb gibt man gerne Alternative
bis hin zu generischen wie Serif oder Sans mit an.
Wie es letztlich beim Benutzer ankommt, kannst du nur bedingt beeinflussen.
Du kannst die Schriften mit hochladen und entsprechend einbinden.
Ob der Homepagebesucher das Nachladen von Schriften ( insbesondere von externen Quellen)
erlaubt, kannst du aber nicht beeinflussen).

[gimpi]

Ja, das ist das Problem mit Schriften auf der Homepage. Deshalb gibt man gerne Alternative
bis hin zu generischen wie Serif oder Sans mit an.

Das kann man umgehen, wenn man die Schrift über Google lädt oder die Schrift auf dem Webspace ablegt und mit dem entsprechenden Style referenziert. Die Schrift über Google einbinden empfehle ich nicht, wegen der DSGVO.

Wie es letztlich beim Benutzer ankommt, kannst du nur bedingt beeinflussen.
Du kannst die Schriften mit hochladen und entsprechend einbinden.
Ob der Homepagebesucher das Nachladen von Schriften ( insbesondere von externen Quellen)
erlaubt, kannst du aber nicht beeinflussen).

Das kann man wie oben beschrieben vermeiden.

Mein Thema:

Ich habe auf meiner Website einen Schriftzug mit der Schrift Alex Brush. Der Text als Schriftzug hat den Nachteil, dass bei langsamen Endgeräten (zB.: langsame Smartpohes) erst eine Alternativschrift angezeigt wird, bevor die Schrift in Alex Brush dargestellt wird.

Meine Lösung ist, den Schriftzug als Bild im SVG Format in die Webseite einzubinden. Das wird dann recht flott geladen.

Aber:

Bilder im SVG Format mit individueller Schrift zu erstellen sind jedoch mit Vorsicht zu genießen, man muss da aufpassen und wissen was man tut. Mit individueller Schrift meine ich eine Schriftart, die der Rechner/Browser (PC) nicht von Haus aus mitliefert. Zum Beispiel die Schriftart Alex Brush.

Installiert man Alex Brush auf seinen Rechner, hat man die Möglichkeit, mit Inkscape ein Bild zu erstellen, mit der Schrift Alex Brush als Schriftzug im Bild.

Speichert man das Bild ohne Pfade, tritt folgendes Problem auf:

Das Bild mit dem Text (Schriftart Alex Brush) wird auf dem PC (mit Gimp zum Beispiel), auf dem die Schrift Alex Brush installiert ist, prima dargestellt. Genau so, wie man das SVG Bild erstellt hat.

Schaut man sich das Bild auf einem anderen PC an, auf dem die Schriftart Alex Brush nicht installiert ist, dann hat das Bild zwar den erstellten Schrifttext, aber nicht im Fontformat Alex Brush - es wird eine alternative Schriftart angezeigt, die der PC kennt.

Deshalb ist es wichtig, eine Schrift im Bild in Pfade zu wandeln, oben von Gimplyworxs auch erwähnt. Die SVG Datei liefert dann somit von Haus aus den korrekten Schriftzug mit, egal auf welchen Rechner man sich das Bild anschaut. Analog verhält es sich bei der Darstellung von Webseiten in Browsern.

Man kann die Pfade sehr schön in der Datei sehen, mit den vielen Zahlen, die letztlich die Polygone der Schrift zeichnen.