Încorporează imagini și fonturi în SVG
Adăugați 1 SVG și imaginile (PNG, JPEG, WebP, GIF) sau fonturile (TTF, OTF, WOFF, WOFF2) pe care le referențiază și combinați-le într-un singur SVG, astfel încât să nu trebuiască să trimiteți resursele separat. Specificați resursa de utilizat pentru fiecare referință și creați SVG-ul. Îl puteți salva după ce previzualizarea se afișează cu succes. Resursele de la URL-uri externe nu sunt preluate automat.
Ce puteți face
Includeți imaginile și fonturile
Încorporați în SVG elementele locale adăugate, pentru a reduce necesitatea trimiterii separate a elementelor.
Verificați referințele și elementele
Specificați fișierul corespunzător pentru fiecare cale de imagine sau nume de font din SVG. SVG-ul nu este creat cu referințe nerezolvate.
Verificați afișarea SVG-ului creat și salvați
Verificați afișarea ca imagine și salvați SVG-ul cu elementele încorporate. Fișierele originale nu sunt suprascrise.
Cum se folosește
Adăugați un SVG și elementele
Alegeți un SVG și imaginile și fonturile pe care le referențiază. Le puteți adăuga împreună și dintr-un folder.
Asociați elementele de încorporat
Verificați fișierul local de folosit pentru fiecare referință. Pentru referințele care nu sunt potrivite automat, selectați dintre elementele deja adăugate.
Creați SVG-ul
Când nu mai există referințe nerezolvate, apăsați „Creează SVG cu imagini și fonturi”.
Verificați afișarea și salvați
Verificați textul și imaginile în previzualizarea creată înainte de salvare. Dacă nu se afișează corect, verificați SVG-ul și elementele originale.
Util când
Predați împreună SVG-ul și elementele
Combinați într-un singur SVG ușor de predat o grafică care referențiază imagini și fonturi aflate în foldere separate.
Verificați cauza referințelor întrerupte
Comparați elementele necesare cu fișierele adăugate, apoi specificați imaginile sau fonturile care lipsesc.
Cum funcționează referințele și încorporarea
Căi relative și potrivirea fișierelor
Referințele sunt potrivite automat când o cale de referință relativă față de SVG corespunde în mod unic căii unui element adăugat. Selectați manual când fișiere cu același nume se află în foldere diferite sau când variantele se suprapun.
Specificați fișierul pentru fiecare nume de font
Instrumentul nu extrage fonturi de pe dispozitiv doar după numele fonturilor din SVG. Adăugați fișierele de font necesare și specificați fișierele care corespund.
Elementele de la URL-uri nu sunt preluate automat
Chiar dacă este referențiat un URL extern, furnizați imaginile sau fonturile local și specificați-le. Acest ecran nu are nicio operațiune de preluare a elementelor de la URL-uri.
Încorporarea este distinctă de reducerea dimensiunii fișierului
Includerea datelor imaginii în SVG poate crește dimensiunea însuși a fișierului SVG. Fonturile sunt convertite în WOFF2 și încorporate. Optimizați codul SVG cu un instrument separat.
Diferențe în funcție de metoda de afișare
Previzualizarea afișează SVG-ul ca imagine. Același aspect nu este garantat în fiecare aplicație, așa că verificați și afișarea cerută la destinație.
Întrebări frecvente
Ce fac dacă un element nu poate fi găsit?
Adăugați imagini sau fonturi, apoi specificați-le în câmpul de selecție pentru referința corespunzătoare. Potrivirea automată poate să nu funcționeze cu foldere diferite, căi duplicate sau URL-uri externe.
Ce elemente pot folosi?
Imaginile pot fi PNG, JPEG, WebP sau GIF, iar fonturile pot fi TTF, OTF, WOFF sau WOFF2. Specificați SVG-urile pe rând.
Găsește fonturile automat?
Instrumentul nu caută fonturi pe dispozitivul sau pe web doar după numele fontului. Adăugați și selectați un fișier pe care îl aveți local.
Ce se întâmplă cu elementele deja încorporate?
Imaginile și fonturile încorporate ca URI de date, precum și referințele # din SVG, nu sunt considerate referințe externe. Puteți crea SVG-ul dacă nu mai rămâne nicio referință detectată nerezolvată.
Ce se întâmplă când adaug sau reselec elemente?
Dacă adăugați doar elemente, acestea sunt adăugate în listă și elementele atribuite anterior sunt păstrate. Verificați potrivirea automată dacă devin disponibile mai multe variante cu aceeași cale, de exemplu. O intrare care include un SVG nou înlocuiește SVG-ul curent și toate elementele sale.
Ce fac dacă există referințe neacceptate?
Utilizarea externă sau referințele la scripturi nu pot fi încorporate. Nici SVG-urile care conțin importuri de CSS extern nu pot fi încărcate. Organizați referințele în aplicația inițială sau într-o altă aplicație potrivită înainte de a selecta SVG-ul.
SVG-ul va deveni mai mic?
Reducerea dimensiunii fișierului nu este scopul acestui instrument. Includerea elementelor în SVG poate crește dimensiunea acestuia. Folosiți optimizarea SVG dacă doriți să curățați codul.
Ce fac dacă SVG-ul creat nu poate fi afișat?
Opțiunea de salvare nu este afișată pe acest ecran până când SVG-ul nu se afișează corect. Verificați SVG-ul și elementele originale, examinați asocierile sau fișierele și creați din nou.
Intrare și rezultate
- Intrare
- 1 SVG plus imagini și fonturi. Adăugați din fișiere sau foldere.
- Imagini
- Datele originale ale imaginilor adăugate sunt încorporate. Imaginile nu sunt redimensionate și nici comprimate.
- Fonturi
- Fonturile asociate sunt convertite în WOFF2 și încorporate.
- Ieșire
- original-name-embedded.svg. Puteți salva după ce SVG-ul creat se afișează corect.