PNG-ni SVG-yə necə çevirmək: loqo, ikon və xətt rəsmləri

PNG rastr şəkildir: hər biri rəngə və istəyə görə şəffaflıq dəyərinə malik piksellərdən ibarət sabit şəbəkə. 500 × 500 px loqoda məhz 250 000 belə kvadrat var və başqa heç nə yoxdur. Ona görə də onu afişa ölçüsünə qədər böyütdükdə hər kvadrat yalnız böyüyür və ya aralarındakı boşluqlar bulanıqlaşır. SVG isə vektor şəkildir: <path>, <circle> və <rect> kimi fiqurları koordinatlar və doldurma rəngləri ilə sadalayan mətn faylıdır. Brauzer və ya kəsim maşını bu fiqurları lazım olan istənilən ölçüdə yenidən çəkir. Vektor loqo telefon ekranında da, sərgi bannerində də kəskin qalır.

Vektordan rastra keçmək asandır, çünki render fiqurları sadəcə piksellərə çəkir; SVG-ni PNG-yə çevirmək bunu bir saniyəyə edir. Əks istiqamətdə itkisiz qısa yol yoxdur, çünki piksel şəbəkəsində onu yaradan fiqurların qeydi saxlanmır. Nəsə piksellərə baxıb hər fiqurun harada başlayıb bitdiyini təxmin etməlidir. Bu təxmin mərhələsi trasirovka və ya vektorlaşdırma adlanır. İllustratordan əmr sətri proqramına qədər hər dürüst PNG-dən SVG-yə çevirici əslində izləyicidir.

Bəzi çeviricilər çətin hissəni atlayır. Onlar orijinal PNG-ni base64 mətni kimi daxil edən tək <image> elementi olan etibarlı SVG faylı yazır, bu da faylı PNG-dən təxminən üçdə bir qədər böyüdür. Nəticə SVG kimi açılır və fayl növü yoxlamasından keçir, amma hələ də vektor qabığında piksel şəkildir: böyütdükdə eyni dişli kənarları görürsünüz, kəsim maşını isə izləyəcək yol tapmır. İstənilən SVG-ni mətn redaktorunda açıb data:image/png axtarın; bu sətir varsa, heç nə vektorlaşdırılmayıb.

Trasirovka ilk növbədə fiqurlar kimi çəkilmiş şəkilləri mükafatlandırır. Dizayn proqramından ixrac edilmiş loqo, düz ikon, qara konturlu cizgi filmi personajı, skan edilmiş imza və ya trafaret açıq kənarlarla ayrılmış bir neçə bircins rəngdən ibarətdir. İzləyici hər rəngi bölgələrə qruplaşdırır, sərhədlərini izləyir və boyunca hamar əyrilər qurur, beləliklə SVG dizaynerin əvvəlcə çəkdiyi fiqurlara yaxın alınır. Söz loqosundakı qalın hərflər də yaxşı izlənir, çünki iri hərf sadəcə doldurulmuş fiqurdur və hər simvol rəngini və ya ölçüsünü dəyişə biləcəyiniz, amma artıq yenidən yaza bilməyəcəyiniz kontura çevrilir.

Fotoşəkillər əks haldır. Portretdə və ya məhsul şəklində bir-birinə qarışan minlərlə incə ton var və vektor formatında bunu səmərəli təsvir etmək yolu yoxdur. İzləyicidən 16 rəng istəsəniz, görünən zolaqları olan posterləşdirilmiş illüstrasiya alırsınız; 64 istəsəniz, PNG-dən xeyli böyük faylda on minlərlə kiçik fiqur alırsınız və yenə foto kimi görünmür. Yumşaq qradiyentlər, kölgələr və parıltılar da eyni cür nazik zolaq yığınlarına çevrilir. Kiçik mətn üçüncü problemdir: 10–12 px-də anti-aliasing hər hərfi fonla qarışdırır və izləyici "e" ilə "o"-nu ayıra bilmir.

Ayrılıqda hər ayardan çox həll önəmlidir. İzləyici hər əyrini kənar boyunca piksel pillələrinə uyğunlaşdırır və pillələr nə qədər incədirsə, əyri bir o qədər dəqiq olur. PNG-ni özünüz Figma, Canva, Photoshop və ya slaydlardan ixrac etmisinizsə, onu göstərilən ölçünün iki-üç qatında yenidən ixrac edin; eni 1500–2000 px olan loqo izləyiciyə kifayət qədər material verir. Kiçik PNG-ni əvvəlcədən süni intellektlə böyütməyin, nəticə 100 % miqyasda təmiz görünmürsə, çünki uydurulmuş kənar teksturası da həqiqi kənarlar qədər sadiqliklə izlənir.

Sonra fonu sadələşdirin. PNG tam şəffaflığı dəstəkləyir və şəffaf fon ən asan haldır: tam şəffaf hər piksel boş sahə sayılır, ona görə SVG-də işin arxasında ağ qutu olmur. PNG-də bircins fon varsa, əvvəlcə işin ətrafından sıx kəsin; dəqiq kadrlama üçün şəkli nisbətə görə necə kəsmək bələdçimizə baxın. Köynəkdə çəkilmiş loqo kimi qarışıq fon izləmədən əvvəl silinməli və ya bir düz rənglə üstündən boyanmalıdır.

Nəhayət, izləyici bunu sizin əvəzinizə etməzdən əvvəl rəng sayını azaldın. Mənbə faylda kölgələri, parıltıları və qradiyent qatlarını gizlədin, vektor versiyada lazım deyilsə, qradiyent doldurmanı orta rənglə əvəz edin. Kontur rəngi də daxil olmaqla qalan bircins rəngləri sayın və rəqəmi yazın; növbəti addımda daxil edəcəyiniz ən faydalı rəqəm budur. Eyni loqonun JPEG və PNG variantı arasında seçirsinizsə, PNG götürün, çünki JPEG sıxması hər kənar ətrafına səs-küy əlavə edir, bunu JPG, JPEG və PNG fərqi məqaləsində izah etmişik.

Etiketlər fərqli olsa da, hər izləyici eyni üç sualı verir. Birincisi, neçə rəng saxlanılsın. PNG-dən SVG-yə çevirici alətində Rəng rejimi Rəngli, Qara-ağ (boz tonlar) və Ağ-qara arasında seçir, Rəng sayı isə piksellərin neçə qrupa ayrılacağını 2-dən 64-ə qədər təyin edir. Yazdığınız rəqəmə uyğun qoyun. Çox yüksək qoysanız, izləyici anti-aliasing kənar piksellərini öz nazik rənglərinə ayırır və bu, hər fiqurun ətrafında zəif halo kimi görünür; çox aşağı qoysanız, iki brend rəngi birləşir.

İkinci sual kənarlara necə yanaşmaqdır. Hamarlama piksellərin buraxdığı pillələri yumşaldır, Detallılıq isə nə qədər kiçik ləkənin hələ fiqur olacağını müəyyən edir. PNG səhifəsi Detallılıq 70 və Hamarlama 40 ilə başlayır, bu da təmiz ixracda kiçik künclərı saxlayır. Toz və təsadüfi nöqtələr görünürsə, Detallılıq-ı azaldın, əyrilər əyri-üyrü görünürsə, Hamarlama-nı artırın, düz kənarlı həndəsi loqolar üçün Əyrilər-i Düz xətlər-ə, blok halında qalmasını istədiyiniz piksel art üçün isə Piksel kənarları-na qoyun.

Üçüncü sual yalnız ağ-qara izləməyə aiddir: mürəkkəb ilə kağız arasında sərhəd harada çəkilsin. Hədd 1-dən 254-ə qədərdir, susmaya görə 128. Həddən tünd pikselllər qara olur, açıq olanlar boş qalır. Nazik göy qələmlə yazılmış imza üçün zəif cizgilər qalsın deyə onu 160–180-ə doğru qaldırın; bir az boz kağızda qalın marker çəkilişi üçün kağız teksturası ləkələrə çevrilməsin deyə 100-ə doğru endirin. Təsirlər bir-birinə bağlı olduğundan, bir ayarı dəyişib müqayisə edin.

Miniatür görüntü ilə kifayətlənməyin. SVG-ni brauzerdə açın və ən sıx əyrinin, məsələn hərf qarnının və ya uc nöqtəsinin üzərində 400–800 % böyüdün. Yaxşı izləmədə hamar qövslər və dizaynda künc olan yerdə kəskin künclər görünür; zəif izləmədə əyri-üyrülük, çökəklər və yuvarlaq uclar olur. Sonra faylı Inkscape, Illustrator və ya Figma kimi vektor redaktorunda açıb kontur və ya düyün görünüşünü yandırın. Sadə iki rəngli loqoya adətən bir neçə yüz düyün lazım olur; sizinkində bir neçə min görünürsə, izləyici səs-küyü izləyib və yolları redaktə etmək və ya kəsmək əzabverici olacaq.

Fayl həcmi sürətli yoxlamadır. Düz loqonun optimallaşdırılmış SVG-si adətən bir neçə kilobaytdan bir neçə on kilobayta qədərdir və çox vaxt çıxdığı PNG-dən kiçikdir. Mənbə PNG-dən bir neçə dəfə böyük izlənmiş fayl adətən çox rəng, həddindən artıq detal və ya izlənməməli olan fotoya işarədir. SVG-ni optimallaşdır-ı açıq saxlayın, çünki o, koordinatları yuvarlaqlaşdırır və yolları görünən dəyişiklik olmadan birləşdirir. Sonda işi poster ölçüsünə qədər böyüdüb favikon ölçüsünə qədər kiçildin və hər ikisində yaxşı oxunduğunu yoxlayın.

Pulsuz masaüstü variantı Inkscape-dir. PNG-ni idxal edin, seçin və Path > Trace Bitmap (Shift+Alt+B) açın. Brightness cutoff kimi tək skan rejimləri xətt çəkilişinə uyğun olan bir qara yol yaradır; çoxlu skan rejimləri müəyyən sayda rəngi və ya boz tonu üst-üstə qatlar kimi izləyir. Inkscape-in ağ-qara izləməsi Peter Selingerin 2001-ci ildə buraxdığı Potrace izləmə kitabxanasına əsaslanır. Potrace özü əmr sətri proqramıdır, PNG yox, PBM, PGM, PPM və ya BMP oxuyur, yalnız ikitonlu şəkilləri emal edir və SVG, PDF, EPS və ya DXF yazır; bu da onu çoxlu skanın skriptlə emalı üçün yaxşı seçim edir.

Adobe Illustrator-da Image Trace, Illustrator CS6-da köhnə Live Trace-i əvəz etdi. PNG-ni yerləşdirin, Window > Image Trace açın və Black and White Logo, 3 Colors və ya 16 Colors kimi hazır ayardan başlayın, sonra qabaqcıl bölmədə Paths, Corners və Noise dəyərlərini tənzimləyin. İzləmə Expand düyməsini basana qədər canlı qalır, bundan sonra adi redaktə oluna bilən yollara çevrilir. Hər iki proqram yoxdursa, brauzer çeviricisi eyni rəngləri azalt, kənarları tap, əyriləri uyğunlaşdır prosesini həyata keçirir; şəkli SVG-yə çevirici JPG, WebP və HEIC də qəbul edir və SVG əvəzinə EPS, PDF və ya DXF yaza bilir.

Veb-də SVG 2001-ci ildən W3C Tövsiyəsidir və hər müasir brauzer onu <img> teqində, CSS fonu kimi və ya HTML daxilində göstərir; orada rəngləri üzərinə gətirdikdə belə dəyişə bilər. İzlənmiş loqo adətən retina ekranlar üçün bir neçə PNG ölçüsünü bir kiçik faylla əvəz edir. Kəsim maşınları üçün SVG, Cricut Design Space və Silhouette Studio-nun gözlədiyi formatdır: hər izlənmiş fiqur kəsim yoluna çevrilir, çoxrəngli izləmə isə fərqli vinil rənglərindən kəsə biləcəyiniz ayrı qatlar kimi gəlir. Lazer kəsicilər və CNC proqramları adətən DXF üstün tutur, onu PNG-dən DXF-ə eyni izləmə ayarları ilə yaradır.

Çap emalatxanaları vektor işi istəyir, çünki mətbəə, tikiş digitayzeri və ya lövhə kəsicisi piksel yox, kənar tələb edir, izlənmiş SVG isə stikerlər, köynəklər və ya banner üçün çox vaxt bunu ödəyir. Bu yenə də yaxınlaşmadır: əyrilər uyğunlaşdırılmış təxminlərdir, rənglər piksellərdən orta alınır, mətn isə konturlaşdırılır. Ona görə şirkət loqosunu izləməzdən əvvəl onu hazırlayandan soruşun. Dizayner və ya agentlikdə demək olar həmişə dəqiq əyriləri, adlandırılmış rəngləri və şriftləri olan orijinal AI, EPS, PDF və ya SVG var və göndərmək onlara bir dəqiqə çəkir. İzləmə orijinal itəndə, loqo yalnız skan edilmiş blankda qalanda və ya iş sizin öz çəkilişinizdirsə düzgün alətdir.