Kas yra šis įrankis?
SVG yra vektorinis formatas — figūros, aprašytos matematika, be galo mastelio keičiamos, idealios logotipams ir piktogramoms. Bet daugelis vietų jo nepriima: „Word“ dokumentai, dauguma socialinių platformų, el. pašto klientai ir daugybė įkėlimo formų nori pikselinių paveikslėlių. Konvertavimas (rastrizavimas) atvaizduoja vektorių kaip PNG ar JPG konkrečiu dydžiu.
Kadangi vektoriai neturi fiksuotos skiriamosios gebos, jūs pasirenkate išvesties plotį — o kadangi šaltinis yra matematika, 2048px eksportas yra tiek pat ryškus, kiek ir 256px. PNG išvestis išsaugo SVG skaidrų foną; JPG jį užpildo baltai.
Kodėl jį naudoti?
- Bet kokia skiriamoji geba iš vieno šaltinio: nuo 256px favicon iki 2048px spausdinimo turinio, viskas tikslu iki pikselio.
- PNG išvestis išsaugo skaidrumą — logotipai tinka bet kokiam fonui.
- Per kelias sekundes išsprendžia „SVG nepalaikomas“ įkėlimo atmetimus.
- Paketinė konversija, vietinis apdorojimas, be įkėlimo.
- Tvarko SVG be aiškaus pločio/aukščio, nuskaitydamas jų viewBox.
Kaip naudoti
- Numeskite .svg failus į laukelį arba spustelėkite, kad pasirinktumėte.
- Pasirinkite išvesties plotį — „Automatinis“ naudoja paties SVG deklaruotą dydį.
- Pasirinkite PNG (išsaugo skaidrumą) arba JPG (baltas fonas).
- Atsisiųskite kiekvieną atvaizduotą paveikslėlį; matmenys rodomi kiekvienam failui.
Pavyzdys
Įvestis
logo.svg — 4 KB vektoriusIšvestis
logo.png — 1024×1024, skaidrus fonas, ryškus kiekviename pikselyjeVienas mažas vektorinis šaltinis sukuria tikslius iki pikselio rastrus bet kokiu jūsų prašomu dydžiu.
Įprasti naudojimo atvejai
- Įmonės logotipo (dizainerio dažniausiai pateikto kaip SVG) įtraukimas į „Word“ ar „PowerPoint“ dokumentą, nepalaikantį SVG įterpimo.
- Programėlių piktogramų ar favicon generavimas kiekvienu reikalingu pikselių dydžiu (16, 32, 180, 512px) iš vieno pagrindinio SVG.
- Piktogramos pridėjimas prie el. pašto parašo, nes dauguma el. pašto klientų atvaizduoja tik rastrinius paveikslėlius.
- Grafikos įkėlimas į socialinio tinklo platformą ar TVS, atmetančią SVG failus dėl saugumo atsargumo priemonės.
Kodėl apskritai egzistuoja SVG įkėlimo apribojimai
Daugelis platformų specialiai blokuoja SVG įkėlimus dėl saugumo priežasties, o ne dėl aplaidumo: kadangi SVG yra pagrįstas XML ir techniškai gali įterpti „JavaScript“ kodą, kenkėjiškas SVG gali tapti skripto įterpimo priemone, jei platforma jį atvaizduoja neapvalytą. SVG rastrizavimas į PNG ar JPG pašalina viską, kas viršija pikselių duomenis, ir tai viena priežasčių, kodėl šis konvertavimas dažnai reikalaujamas, o ne tiesiog patogus — tikslinė platforma iš tikrųjų negali saugiai priimti vektorinio formato, nepriklausomai nuo to, ar konkretus jūsų SVG yra nekenksmingas.
Kaip iš tikrųjų veikia nepriklausomumas nuo skiriamosios gebos
SVG failas apskritai nesaugo pikselių — jis saugo matematinius kelio apibrėžimus („nubrėžk liniją nuo šio taško iki ano taško“, „užpildyk šią kreivę šia spalva“) ir viewBox, apibrėžiantį koordinačių erdvę, kurioje šie keliai egzistuoja. Kai jį rastrizuojate, naršyklės atvaizdavimo variklis kiekvieną kartą nuo nulio perskaičiuoja kiekvieną kreivę ir užpildymą jūsų prašomais pikselių matmenimis. Tai iš esmės skiriasi nuo esamo rastrinio paveikslėlio (JPG ar PNG) dydžio keitimo, kur didinimas reiškia pikselių, kurių niekada nebuvo, išgalvojimą ir neišvengiamai atrodo suliejęs — 4000px atvaizduotas SVG yra tiek pat ryškus, kiek ir 100px atvaizduotas, nes abu kiekvieną kartą naujai apskaičiuojami iš tos pačios tikslios matematikos, o ne ištempiami iš mažesnio šaltinio.
Dažniausiai užduodami klausimai
Kokia skiriamąja geba turėčiau eksportuoti?
Atitikite didžiausią dydį, kuriuo rodysite, ir šiek tiek daugiau: 512px tinka daugumai žiniatinklio logotipų naudojimo atvejų, 1024px+ „retina“ ekranams ir pristatymams, 2048px spausdinimui. Skirtingai nei nuotraukos padidinimas, didelis eksportas iš SVG nieko nekainuoja ryškumui.
Kodėl mano SVG atvaizduojamas tuščias ar sugadintas?
Dažniausiai dėl išorinių nuorodų: SVG, susieti su išoriniais paveikslėliais, šriftais ar CSS, negali jų įkelti naršyklės saugumo aplinkoje (sandbox). SVG su įterptu (inline) turiniu konvertuojami sklandžiai. Tekstas taip pat gali pasislinkti, jei naudoja šriftą, kurio nėra jūsų sistemoje.
PNG ar JPG išvestis — ką rinktis?
Beveik visada PNG: logotipams ir piktogramoms reikia skaidrumo ir ryškių kraštų, kuriuos PNG išsaugo, o JPG sugadina. Rinkitės JPG tik tada, kai tikslas tai griežtai reikalauja arba SVG yra nuotraukai panašus iliustratyvus vaizdas.
Ar galiu čia konvertuoti PNG atgal į SVG?
Ne — tai iš esmės kitokia užduotis (pikselių pavertimas figūromis), duodanti geriausiu atveju apytiksles reikšmes. Šis įrankis konvertuoja vektorių → rastrą, o tai yra tikslus veiksmas.
Ar mano SVG įkeliamas konvertavimui?
Ne. Naršyklė atvaizduoja SVG ant vietinio drobės (canvas) elemento ir užkoduoja PNG/JPG jūsų įrenginyje. Niekas nesiunčiama.
Ar turėčiau eksportuoti SVG kaip PNG, ar kaip JPG?
Jei grafikoje yra skaidrumas — logotipas, kuris turi tikti bet kokiam fonui — rinkitės PNG: JPG neturi alfa kanalo ir skaidrias sritis užpildys vientisa spalva. PNG taip pat geriau tinka ryškiakraščiam menui, tokiam kaip piktogramos ir diagramos. Rinkitės JPG tik tada, kai SVG turi fotografinį ar stipriai gradientais užpildytą turinį, o failo dydis svarbesnis už kraštus.