Cum pot să convertesc un SVG în PNG fără a pierde fonturile?
De ce ieșirea SVG în PNG ajunge la 2x dimensiunea declarată și de ce sandbox-ul browser-ului elimină în tăcere fonturile externe și imaginile legate în timpul redării.
Un SVG nu are pixeli în el. Este XML: căi, umpleri, un viewBox și poate un element <text> care numește un font pe care fișierul nu îl conține de fapt. Rasterizarea acestuia în PNG înseamnă alegerea unei grile de pixeli și pictarea acelor forme pe ea, astfel că două lucruri decid dacă îți place rezultatul. Câte pixeli ai cerut și ce a fost permis renderer-ului să încarce în timp ce picta.
Executăm acea redare în interiorul browser-ului tău. Fișierul intră într-un URL blob, un element <img> îl încarcă, browser-ul îl pictează pe un OffscreenCanvas și un encoder WebAssembly scrie PNG-ul. Această aplicație nu are rute API și nu are acțiuni pe server, astfel încât un logo nepublicat nu stă niciodată în coșul temporar al cuiva așteptând o cronologie de ștergere. Cele mai multe convertoare SVG în PNG încarcă mai întâi și promit curățare mai târziu. Al nostru nu trimite niciodată byte-urile nicăieri, ceea ce este întregul scop al modelului nostru de confidențialitate.
Ce se întâmplă de fapt când un browser rasterizează un SVG?
SVG-ul tău este predat unui element <img>, iar acel detaliu conduce totul pe această pagină. Un SVG încărcat ca imagine rulează într-un mod de procesare restricționat unde scripturile nu se execută și referințele externe nu sunt preluate, ceea ce regulile de conformitate SVG 2 definesc ca moduri de procesare sigure. Odată ce încărcarea se rezolvă, îl pictăm cu drawImage pe un OffscreenCanvas, citim pixelii înapoi, codificăm cu @jsquash/png și apoi rulăm oxipng la nivelul 3 peste byte-uri. Acea etapă este fără pierderi. Alpha supraviețuiește întregului parcurs, astfel încât un logo transparent iese transparent.
Ce dimensiune va avea de fapt PNG-ul?
Converterul nostru redă la dublul dimensiunii intrinseci a SVG-ului. Un SVG de 500x500 iese 1000x1000. Dublarea îți oferă un fișier de calitate retina gratuit, și este de asemenea lucrul peste care oamenii se împiedică atunci când o specificație cere un număr exact de pixeli. Dacă browser-ul raportează că nu există dimensiune intrinsecă utilizabilă, substituim 1024x1024 înainte de dublare, astfel încât PNG-ul ajunge la 2048x2048. Speciificația CSS Images acoperă de ce o dimensiune poate lipsi în primul rând: un element înlocuit fără lățime sau înălțime intrinsecă revine la o dimensiune de obiect implicit, iar un viewBox de unul singur furnizează un raport fără dimensiune atașată. Așadar, setează lățimea și înălțimea pe rădăcina <svg> la jumătate din ținta ta. 256 intră, 512 iese.
| Ce declară rădăcina <svg> | PNG-ul pe care îl scriem |
|---|---|
| width="500" height="500" | 1000 x 1000 |
| width="256" height="256" | 512 x 512 |
| width="64" height="64" (un icon) | 128 x 128, de obicei prea mic |
| Nicio dimensiune intrinsecă utilizabilă | 2048 x 2048 (fallback 1024, dublat) |
De ce textul meu a ieșit într-un font greșit?
Aceasta este cea mai comună plângere și nu este un bug în converter. O regulă @font-face care indică un URL .woff2 contează ca o referință externă, astfel încât modul sigur blochează acea preluare înainte de a începe. Fonturile încărcate de pagina din jurul imaginii nu ajung nici ele în interior, deoarece un SVG într-un <img> este un document separat care își face propria rezolvare a fontului. Ce obții este orice poate potrivi mașina din lista font-family, ceea ce pe laptopul unui revizor înseamnă un fallback pe care nu l-ai ales niciodată. Soluția este să nu mai expediți textul ca text. Illustrator îl numește Type > Create Outlines. Inkscape îl numește Path > Object to Path. Ambele convertesc fiecare glif într-o cale, fișierul crește puțin și redarea nu mai depinde de mașină.
De ce lipsește fotografia din SVG-ul meu?
Aceeași regulă, simptom diferit. Dacă SVG-ul tău aduce un bitmap printr-un element <image> cu un URL https absolut, acel URL nu este preluat, iar PNG-ul revine cu o gaură unde ar trebui să fie fotografia. Un data: URI funcționează bine, deoarece nu există cerere de rețea care să fie blocată. Există un al doilea motiv pentru a încorpora: un bitmap cross-origin pictat într-un canvas contaminează și citirea pixelilor înapoi aruncă apoi o SecurityError. Acea eșec anunță cel puțin de la sine. O referință blocată este tăcută, ceea ce costă oamenii o după-amiază. Deschide fișierul într-un editor de text și caută http înainte de a converti.
Pot să convertesc un PNG înapoi într-un SVG?
Nu, și nu ne prefacem altfel. Converterul nostru decodează SVG și nu poate să-l codifice: encoderele din construcție scriu JPEG, PNG, WebP, AVIF și PDF, iar niciuna dintre cele 24 de perechi din 11 formate nu are SVG ca țintă. Mergând de la pixeli înapoi la căi este trasare, o mașină ghicind unde apar marginile, iar o marcă de cuvânt trasată este rar suficient de aproape pentru a fi expediată. Re-exportează din original dacă încă îl ai. Dacă ceea ce ai nevoie cu adevărat este rasterul la o dimensiune mai mare, upscaler-ul nostru rulează Real-ESRGAN și scrie întotdeauna PNG: a luat un fișier de 400x269 la 1600x1076 la 4x.
Cum transform un SVG într-un set de favicon-uri?
Generatorul de iconi acceptă SVG direct, ceea ce compresorul, redimensionatorul și decupatorul nu fac: acelea trei acceptă doar JPEG, PNG, WebP, AVIF și GIF. Îți redă SVG-ul pe un canvas pătrat dimensionat la cea mai mare dintre cele două dimensiuni sau 512 pixeli, oricare câștigă, astfel încât un icon de 64x64 primește totuși un canvas de 512 pentru a fi redus. Iese un set de șapte fișiere: favicon.ico care conține 16, 32 și 48, favicon-16x16.png, favicon-32x32.png, un apple-touch-icon.png de 180px, android-chrome-192x192.png, android-chrome-512x512.png și site.webmanifest. De ce acel .ico câștigă încă 4.6 KB este o argumentație separată. Un fișier pe rând, limită de 10 MB. Converterul este instrumentul de lot: 10 fișiere și 50 MB pe rulare.
Ar trebui să comprim PNG-ul ulterior?
De obicei, și modul contează mai mult decât orice slider. Pe un PNG transparent de 942.4 KB la 900x606, calea fără pierderi (oxipng nivel 3) a ieșit la 383.9 KB, o reducere de 59% cu fiecare pixel identic cu intrarea. Calea paletei (imagequant) a dus același fișier la 98.3 KB, o reducere de 90%, prin reducerea la 256 de culori. Arta vectorială plată este cel mai bun caz pentru modul paletă, deoarece un logo cu șase umpleri nu are nimic asemănător cu 256 de culori de cedat. Comprimarea elimină de asemenea toate metadatele. Rulează ambele în compresor și păstrează-l pe cel care se menține.
Fă asta următorul: deschide SVG-ul într-un editor de text, caută http pentru a prinde fonturile și imaginile legate, conturează orice text activ, apoi setează lățimea și înălțimea pe rădăcina <svg> la jumătate din dimensiunea țintă și aruncă-l pe /convert/svg-to-png. Dacă PNG-ul este destinat unei pagini web, trimite-l direct la compresor, iar PNG-ul comparativ cu numerele WebP pentru un fișier cu transparență îți spune dacă să schimbi formatul sau nu. Dacă este destinat unui document, notițele noastre despre JPG în PDF acoperă dimensiunea paginii cu care ajunge o imagine convertită.