Das SVG-Bild sieht auf der HTML-Seite seltsam aus

Ich habe also zwei gleiche Bilder, eines ist ein SVGund das andere ist eine PNG. Ich habe Inkscape verwendet, um die PNGaus der SVG. Das Dilemma, in dem ich stecke, ist, dass SVGdie blauen Linien viel weiter über den eigentlichen Text hinausgehen, was etwas ist, das ich nicht möchte und das SVGgenau so aussehen möchte PNG.

Danke Alex

Antworten (2)

Ihre Schriftart wurde ersetzt.

Vergleichen Sie jedes Zeichen und Sie werden einige geringfügige Unterschiede feststellen. Der Browser ist für das Rendern einer SVG-Datei verantwortlich. Wenn es keinen Zugriff auf eine Schriftart hat oder die Schriftartspezifikation nicht versteht, kehrt es zu einem Fallback zurück.

Die Lösung besteht darin , den Text mit + + in Pfade umzuwandeln . Dadurch wird Ihr Text nicht bearbeitbar, aber er wird korrekt gerendert.CtrlShiftC

In der Regel wandle ich Text in SVG-Dateien, die für das Web bestimmt sind , immer in Pfade um. Normalerweise verwende ich Ebenen, sodass eine Ebene den bearbeitbaren Text enthält. Dann dupliziere ich es, verstecke das Original und führe die Konvertierung durch. Auf diese Weise kann ich den Text bei Bedarf erneut bearbeiten.

Leider werden dadurch einige der Vorteile der Verwendung von SVG von vornherein zunichte gemacht, wie Dateigröße, Texte, die durchsucht werden können, die automatisch übersetzt werden können, die von Tools hörbar gemacht oder anderweitig von Geräten für Blinde transformiert werden können. Weitere Vorteile sind, dass Textkorrekturen einfacher sind als Text. Das Speichern eines Backups vor dem Transformieren hat andere Nachteile, wie mehr Speicherplatz, das Verwalten von zwei statt einer Datei, das Bestimmen des Arbeitsablaufs ...
Oh, nachdem ich noch einmal gelesen habe, sehe ich, dass ich die Ebene beaufsichtigt habe, indem ich den Text unsichtbar gespeichert habe. Ich denke in Hintergrundfarbe oder in einer Ebene unter einer anderen Hintergrundebene?
@userunknown Sie haben Recht mit den Vor- und Nachteilen. Nach meinem besten Wissen gibt es keine Möglichkeit, Text in SVGs, die von Inkscape erstellt wurden, konsistent darzustellen, wenn der Benutzer diese Schriftart nicht auf seinem System hat, weshalb ich den Text normalerweise einfach in Pfade ändere. Ob es die beste Methode ist oder nicht, es ist eine, die zumindest ohne Kopfschmerzen funktioniert. Siehe Schriftarten in Inkscape einbetten
Ich stimme zu und wünschte, es gäbe eine bessere Darstellung in Browsern. Vielleicht offene Referenzschriftarten, die über das Internet verwendet oder einmal auf Ihre lokale Plattform heruntergeladen werden könnten - wenn Sie etwas anderes verwenden möchten oder müssen, können Sie es trotzdem tun. Hoffnungen, Fantasien...

Zunächst einmal hängt das Aussehen der SVG-Datei davon ab, wie die aktuelle Software sie darstellt. Dies bedeutet, dass Explorer es anders als Chrome rendern kann und FireFox es etwas anders rendert ... Wie auch immer - wenn Sie die SVG-Datei in einer anderen Software als Inkscape verwenden möchten - speichern Sie sie als PLAIN-Svg (und Nicht-Inkscape-Svg).

Eigentlich sollte die Verwendung von einfachem SVG keinen Unterschied machen . Der Unterschied zwischen einfachen und Inkscape-SVG besteht darin, dass in der Inkscape-Version einige zusätzliche Namespace-Informationen gespeichert sind (was vollkommen gültiges SVG ist und für jeden SVG-Renderer akzeptabel sein sollte - es wird einfach ignoriert).
1. Zunächst einmal - Text in Pfad umwandeln ist keine Lösung für das WEB. Der Text im Web sollte indexiert werden! 2. Das ist richtig, dass die Verwendung von einfachem SVG KEINEN Unterschied machen sollte, aber meiner Erfahrung nach tut es das manchmal (sonst würde ich das nicht erwähnen).
Wenn Sie den Originaltext in einer anderen Ebene aufbewahren, wie ich vorschlage, bleibt der Originaltext in der Datei (vorausgesetzt, Suchmaschinen indizieren tatsächlich Inhalte in SVG-Dateien), was Nr. 1 adressieren würde. Für Nr. 2 würde ich gerne ein Beispiel sehen (das ist eine ernsthafte, keine bissige Anfrage). Ich benutze Inkscape seit Jahren und habe nie einen Vorteil bei der Verwendung von einfachem SVG gefunden.
Warum "annehmen" (in "annehmen, dass Suchmaschinen tatsächlich indexieren...")? Beispiel aus meinem täglichen Arbeitsablauf - wenn ich Inkscape-Svg in Blender importiere - muss es ein einfaches SVG sein.
Und warum bist du mit meiner Antwort so nicht einverstanden? svg ist eine Auszeichnungssprache, genau wie HTML - natürlich rendert jeder Browser es auf seine eigene Weise, die HTML-Seiten sind in verschiedenen Browsern nicht genau gleich, das bedeutet nicht, dass Sie sie zu Bildern backen. .
Das Konvertieren von Text in Pfade in SVGs ist nicht das Äquivalent zum Umwandeln einer Webseite in ein Bild. Wenn eine Schriftart auf einer Website ersetzt wird, passiert meistens nichts Schlimmes. Divs können erweitert werden, die Seite kann länger werden usw., aber sie sollte verwendbar sein. Wenn Ihre Schriftart jedoch in einem SVG ersetzt wird, kann sie VOLLSTÄNDIG geändert werden, da sich die Textgröße ändern kann, Pfade jedoch nicht, was das Problem in dieser Frage zu sein scheint. Ihre Antwort würde dieses Problem nicht lösen, daher war ich anderer Meinung. (FYI, ich habe nicht abgelehnt)
Übrigens - das Verstecken des bearbeitbaren Textes im SVG ist HÖCHST FALSCH - es kann von Google als schwarzes SEO angesehen werden und Sie sperren. Erwähnen Sie nicht, dass es nur eine sehr unprofessionelle Problemumgehung ist. Es ist, als würde man ein Bild mit Text backen und den Text in das "alt"-Tag einfügen,,,
"Das Konvertieren von Text in Pfade in SVGs ist nicht das Äquivalent zum Umwandeln einer Webseite in ein Bild. Wenn eine Schriftart auf einer Website ersetzt wird, passiert größtenteils nichts Schlimmes" - nichts SCHLECHTES, OK, aber der Text ist es nicht ein text mehr... in unseren tagen ist sehr wichtig. Und das Wichtigste: Sie können @font-face in Ihr SVG-Dokument einbetten!
Das SVG-Bild sieht auf der HTML-Seite seltsam aus
AntwortenHierDatenschutz-Bestimmungen1y, 0v