← Barcha vositalar

SVG dan PNG ga O'tkazgich

SVG vektor rasmlarini brauzeringizda istalgan o'lchamda PNG ga o'tkazing. Shaffoflikni saqlang, to'g'ri rezolyutsiyani tanlang, hech narsa hech qachon yuklanmaydi.

Masshtablanuvchan SVG vektorlarini foydalanishga tayyor PNG rasmlariga aylantiring

SVG fayli - bu tugallangan rasm emas, balki ko'rsatmalar to'plami. Uni matn muharririda ochsangiz, yo'llar, shakllar, to'ldirishlar va egri chiziqlarni tasvirlaydigan XML ko'rasiz — brauzer siz so'ragan har qanday o'lchamda san'at asarini yangidan chizish uchun amal qiladigan retsept. PNG esa aksincha: belgilangan eni va bo'yida muzlatilgan rangli piksellar to'ri. Birini boshqasiga aylantirish rasterizatsiya deb ataladi, va ushbu vosita buni to'liq brauzeringiz ichida bajaradi. Siz chiqish o'lchamini tanlaysiz, SVG HTML canvas-ga chiziladi, va PNG qaytariladi — hech qanday fayl qurilmangizdan chiqmaydi.

Toza vektor shakl qorong'i indigo fonda yorqin piksel to'riga aylanmoqda
Rasterizatsiya ruxsatnomadan mustaqil vektorni belgilangan piksel to'riga aylantiradi.

Vektor va rasterning oddiy tildagi farqi

Asosiy farq - ruxsatnoma qanday boshqarilishida. SVG piksellar o'rniga matematikani saqlagani sababli, u ruxsatnomadan mustaqil: logotipni favicon-dan billbordgacha masshtablang, va har bir chekka matematik jihatdan aniq bo'lib qolish uchun qayta hisoblanadi. PNG bunday erkinlikka ega emas. Uning piksellari qat'iy o'rnatilgan, shuning uchun uni asl o'lchamidan kattaroq qilish tomoshabinni mavjud nuqtalarni cho'zishga majbur qiladi, va siz raster rasmlarni fosh qiladigan xiralik hamda zinapoyasimon effektlarni ko'ra boshlaysiz.

Bu murosa ikki tomonlama ishlaydi. Vektorlar logotiplar, ikonalar va toza shakllardan iborat tekis illyustratsiyalar uchun beqiyos, va fayllar odatda juda kichik. PNG kabi raster formatlar gradientlar, yumshoq soyalar va fotografik detallarni tabiiyroq boshqaradi, va — muhimi — ular deyarli hamma narsa tomonidan tushuniladi. Rasterizatsiya qilganda siz SVG-ning cheksiz masshtablanishini PNG-ning tanlangan bitta o'lchamdagi universal moslikka almashtirasiz.

Nima uchun umuman SVG-ni rasterizatsiya qilish kerak

Agar SVG shunday chiroyli masshtablansa, nima uchun konvertatsiya qilish kerak? Moslik odatiy javob. Ko'plab joylar SVG-ni umuman qabul qilmaydi: ko'plab elektron pochta mijozlari uni olib tashlaydi yoki ko'rsatishdan bosh tortadi, hujjat muharrirlari va taqdimot dasturlari ko'pincha tekis rasmni talab qiladi, bozorlar va reklama tarmoqlari PNG yoki JPG-ni talab qiladi, va ko'pchilik ijtimoiy platformalar vektor yuklamalarini butunlay e'tiborsiz qoldiradi. Ba'zi kontent tizimlari SVG-ni xavfsizlik sabablari bilan ham to'liq bloklaydi, chunki format skriptlarni o'z ichiga olishi mumkin.

Ikkinchi sabab - ba'zan sizga belgilangan o'lchamdagi aktiv kerak bo'ladi. Ilova ikonalari, eskizlar, Open Graph oldindan ko'rish rasmlari va bosma materiallarning barchasi aniq piksel o'lchamlarini kutadi. PNG san'at asarini ushbu maqsadga qulflaydi, shunda u hech qanday kutilmagan hodisasiz, vektorni turlicha talqin qiladigan tomoshabinsiz, hamma joyda bir xil tarzda ko'rsatiladi. Manba SVG-ni platforma talab qiladigan aniq o'lchamlarga konvertatsiya qilish ko'pincha izchil natijaga eng toza yo'l hisoblanadi.

To'g'ri eksport ruxsatnomasini tanlash

PNG yuqoriga qarab yaxshi masshtablana olmagani sababli, eksport qiladigan o'lchamingiz har qanday vektorga nisbatan ko'proq ahamiyatga ega. Juda kichik eksport qilsangiz, rasm zamonaviy ekranlarda yumshoq ko'rinadi; keraksiz katta eksport qilsangiz esa, o'tkazish qobiliyatini behuda sarflaysiz. Oddiy qoida: rasm qachondir ko'rsatiladigan eng katta o'lchamni aniqlang, so'ng kamida shu o'lchamda, va yuqori zichlikdagi displeylar uchun ideal holda ko'proq render qiling.

Standart ekranlar 1x da yaxshi — san'at asarining nominal o'lchami. Yuqori DPI va Retina displeylar bir xil maydonga taxminan ikki barobar ko'proq piksel joylashtiradi, shuning uchun 2x eksport ikonalar va grafikalarni xira emas, aniq saqlaydi. Bosma nashr, plakatlar yoki juda katta displeylar uchun 3x yoki 4x sizga zaxira beradi. Manba vektor bo'lgani sababli, kattaroq eksport qilish sifatga hech qanday zarar keltirmaydi — egri chiziqlar tekislashtirilishidan oldin yuqoriroq piksel sonida shunchaki qayta hisoblanadi. Shubha bo'lsa, katta o'lchamda render qiling; katta PNG-ni har doim kichraytirishingiz mumkin, lekin kichik PNG-ni kattalashtirib detalni hech qachon tiklay olmaysiz.

Masshtablanuvchan wireframe ikona ko'k va oltin rangda yorqin tartibli piksel plitalari yonida
Bitta vektor manbadan ko'plab belgilangan piksel o'lchamidagi PNG-larni eksport qilish mumkin.

Shaffoflik bepul saqlanib qoladi

PNG to'liq alfa-kanalni qo'llab-quvvatlaydi, ya'ni shaffoflik konvertatsiyadan omon qoladi. Agar SVG-ingizda fon to'ldirilmagan bo'lsa, natijaviy PNG bu joylarni ko'rinadigan holda saqlaydi, shuning uchun logotip yoki ikona xunuk oq quti bo'lmasdan istalgan rangga toza tushadi. Agar o'rniga qattiq fon kerak bo'lsa, konvertatsiyadan oldin SVG-ga fon bering. Ikkala holatda ham, vektorda ko'rganingiz PNG-da saqlanadi, va aynan shuning uchun PNG — JPG emas — ikonalar, nishonlar va qoplamalar uchun tabiiy maqsad hisoblanadi.

Hammasi qurilmangizda qoladi

Ushbu konvertor canvas API yordamida brauzeringizda mahalliy kod sifatida ishlaydi. SVG-ingiz hech qachon serverga yuborilmasdan o'qiladi, chiziladi va eksport qilinadi, shuning uchun yuklash yo'q, navbat yo'q va san'at asaringizning nusxasi boshqa birovning saqlagichida yotishi ham yo'q. Bu chiqarilmagan brending yoki ichki diagrammalar kabi uchinchi tomonga topshirishni istamaydigan har qanday narsa uchun tezroq va xavfsizroq. Bu yerdagi ishni tugatgach, bizning boshqa rasm vositalarimizni ko'rib chiqing — agar Windows yoki favicon aktivini yaratayotgan bo'lsangiz, PNG dan ICO ga konvertori tabiiy keyingi qadam.

Tez-tez so'raladigan savollar

PNG SVG kabi aniq ko'rinadimi?

Eksport qilgan o'lchamingizda - ha. Vektor tanlangan ruxsatnomangizda yangidan render qilingani sababli, chetlar aniq bo'lib qoladi. Farqi shundaki, PNG-ni keyinchalik yumshoqlanmasdan kattalashtirib bo'lmaydi, asl SVG esa har doim buni qila oladi.

Konvertatsiya shaffoflikni saqlaydimi?

Ha, saqlaydi. PNG-da alfa-kanal bor, shuning uchun SVG-ingizdagi har qanday shaffof joylar PNG-da ham shaffof bo'lib qoladi. Agar o'rniga qattiq to'ldirish kerak bo'lsa, avval SVG-ga fon qo'shing.

Qaysi ruxsatnomani tanlashim kerak?

Rasm ko'rsatiladigan eng katta o'lchamga mos keling yoki undan oshib keting. Standart ekranlar uchun 1x, Retina va yuqori DPI displeylar uchun 2x, bosma nashr yoki katta hajmdagi grafikalar uchun 3x yoki 4x dan foydalaning. Manba vektor bo'lgani uchun kattaroq render qilish sifatga hech qanday zarar keltirmaydi.

Nima uchun SVG-ni hamma joyda ishlatmasligim kerak?

Ko'plab elektron pochta mijozlari, hujjat muharrirlari, bozorlar va ijtimoiy platformalar SVG-ni qabul qilmaydi yoki ishonchli tarzda render qilmaydi. PNG deyarli hamma joyda ishlaydi va san'at asarini bashorat qilinadigan, belgilangan o'lchamga qulflaydi.

Fayllarim biror joyga yuklanadimi?

Yo'q. Hammasi brauzeringizda mahalliy tarzda ishlaydi. SVG-ingiz hech qachon serverga yuborilmaydi, shuning uchun hech narsa yuklanmaydi, saqlanmaydi yoki kuzatilmaydi.

PNG-ni qaytadan SVG-ga aylantira olamanmi?

To'liq aniqlikda emas. Rasterizatsiya asl matematikani tashlab yuboradi, shuning uchun orqaga qaytish piksellarni yangi vektor yo'llariga aylantirishni anglatadi, bu esa kamdan-kam manbaga mos keladi. Asl SVG-ingizni asosiy fayl sifatida saqlang.