Bilder und Fonts in SVG einbetten
Fügen Sie 1 SVG und die darin referenzierten Bilder (PNG, JPEG, WebP, GIF) oder Fonts (TTF, OTF, WOFF, WOFF2) hinzu und bündeln Sie sie in einem SVG, damit die Ressourcen nicht separat weitergegeben werden müssen. Geben Sie für jeden Verweis die zu verwendende Ressource an und erstellen Sie das SVG. Sie können es speichern, sobald die Vorschau erfolgreich angezeigt wird. Ressourcen von externen URLs werden nicht automatisch abgerufen.
Was du tun kannst
Bilder und Schriftarten zusammenfassen
Bette hinzugefügte lokale Materialien in das SVG ein, um den Aufwand zu verringern, Materialien getrennt weiterzugeben.
Referenzen und Materialien prüfen
Gib für jeden Bildpfad oder Schriftartnamen im SVG die entsprechende Datei an. Das SVG wird nicht erstellt, solange ungelöste Referenzen verbleiben.
Anzeige des erstellten SVG prüfen und speichern
Prüfe die Darstellung als Bild und speichere das SVG mit eingebetteten Materialien. Originaldateien werden nicht überschrieben.
Verwendung
SVG und Materialien hinzufügen
Wähle ein SVG sowie die Bilder und Schriftarten aus, auf die es verweist. Du kannst sie auch gemeinsam aus einem Ordner hinzufügen.
Einzubettende Materialien zuordnen
Prüfe die lokale Datei, die für jede Referenz verwendet werden soll. Wähle für Referenzen, die nicht automatisch zugeordnet werden, aus den bereits hinzugefügten Materialien aus.
SVG erstellen
Sobald keine ungelösten Referenzen mehr vorhanden sind, klicke auf „SVG mit Bildern und Schriftarten erstellen“.
Anzeige prüfen und speichern
Prüfe Text und Bilder in der erstellten Vorschau, bevor du speicherst. Wenn die Darstellung fehlschlägt, prüfe das ursprüngliche SVG und die Materialien.
Praktisch, wenn
SVG und Materialien gemeinsam weitergeben
Fasse eine Grafik, die auf Bilder und Schriftarten in getrennten Ordnern verweist, zu einem SVG zusammen, das sich leicht weitergeben lässt.
Ursache fehlgeschlagener Referenzen prüfen
Vergleiche die benötigten Materialien mit den hinzugefügten Dateien und gib fehlende Bilder oder Schriftarten an.
Wie Referenzen und Einbettung funktionieren
Relative Pfade und Dateizuordnung
Referenzen werden automatisch zugeordnet, wenn ein vom SVG aus gesehener Referenzpfad eindeutig mit dem Pfad eines hinzugefügten Materials übereinstimmt. Wähle manuell, wenn Dateien mit gleichem Namen in unterschiedlichen Ordnern liegen oder sich Kandidaten überschneiden.
Für jeden Schriftartnamen die zu verwendende Datei angeben
Das Tool extrahiert keine Schriftarten aus deinem Gerät allein anhand der Schriftartnamen im SVG. Füge die benötigten Schriftdateien hinzu und gib die passenden Dateien an.
Materialien unter URLs werden nicht automatisch abgerufen
Auch wenn eine externe URL referenziert wird, stelle die Bilder oder Schriftarten lokal bereit und gib sie an. In diesem Bildschirm gibt es keine Funktion, um Materialien von URLs abzurufen.
Einbettung ist etwas anderes als Größenreduzierung
Da Bilddaten in das SVG aufgenommen werden, kann die Größe der SVG-Datei selbst zunehmen. Schriftarten werden in WOFF2 konvertiert und eingebettet. Die SVG-Code-Optimierung erfolgt mit einem separaten Tool.
Unterschiede je nach Anzeigemethode
Die Vorschau zeigt das SVG als Bild an. Es ist nicht garantiert, dass es in jeder App gleich aussieht; prüfe deshalb die erforderliche Anzeige auch am Zielort.
Häufig gestellte Fragen
Was soll ich tun, wenn ein Material nicht gefunden wird?
Füge Bilder oder Schriftarten hinzu und gib sie im Auswahlfeld der entsprechenden Referenz an. Die automatische Zuordnung funktioniert unter Umständen nicht bei unterschiedlichen Ordnern, doppelten Pfaden oder externen URLs.
Welche Materialien kann ich verwenden?
Bilder können PNG, JPEG, WebP oder GIF sein; Schriftarten können TTF, OTF, WOFF oder WOFF2 sein. SVGs werden einzeln angegeben.
Werden Schriftarten automatisch gefunden?
Das Tool sucht nicht allein anhand eines Schriftartnamens auf deinem Gerät oder im Web nach Schriftarten. Füge eine Datei hinzu, die du lokal hast, und wähle sie aus.
Was geschieht mit bereits eingebetteten Materialien?
Als data URI eingebettete Bilder und Schriftarten sowie #-Referenzen innerhalb des SVG zählen nicht als externe Referenzen. Du kannst das SVG erstellen, wenn keine erkannten Referenzen ungelöst bleiben.
Was geschieht, wenn ich Materialien hinzufüge oder neu auswähle?
Wenn du nur Materialien hinzufügst, werden sie der Liste hinzugefügt und bereits zugewiesene Materialien bleiben erhalten. Prüfe die automatische Zuordnung, wenn zum Beispiel weitere Kandidaten mit demselben Pfad verfügbar werden. Eine Eingabe, die ein neues SVG enthält, ersetzt das aktuelle SVG und alle zugehörigen Materialien.
Was ist, wenn es nicht unterstützte Referenzen gibt?
Externe use- oder script-Referenzen können nicht eingebettet werden. SVGs, die Imports von externem CSS enthalten, können ebenfalls nicht geladen werden. Ordne die Referenzen in der ursprünglichen App oder einer anderen geeigneten App, bevor du das SVG auswählst.
Wird das SVG kleiner?
Die Verringerung der Dateigröße ist nicht der Zweck dieses Tools. Wenn du Materialien in das SVG einbindest, kann seine Größe zunehmen. Nutze die SVG-Optimierung, wenn du den Code aufräumen möchtest.
Was ist, wenn das erstellte SVG nicht angezeigt werden kann?
In diesem Bildschirm wird die Speicheroption erst angezeigt, wenn das SVG erfolgreich dargestellt wird. Prüfe das ursprüngliche SVG und die Materialien, sieh dir die Zuordnungen oder Dateien noch einmal an und erstelle es erneut.
Eingabe und Ergebnisse
- Eingabe
- 1 SVG sowie Bilder und Schriftarten. Hinzufügen aus Dateien oder Ordnern.
- Bilder
- Die Originaldaten der hinzugefügten Bilder werden eingebettet. Bilder werden weder skaliert noch komprimiert.
- Schriftarten
- Zugeordnete Schriftarten werden in WOFF2 konvertiert und eingebettet.
- Ausgabe
- original-name-embedded.svg. Du kannst speichern, nachdem das erstellte SVG erfolgreich dargestellt wird.