Vektor və rastr: PNG-ni SVG-yə keyfiyyət itkisi olmadan necə çevirmək olar

1. Rastr bitmaplar və vektor həndəsəsi: PNG miqyaslandıqda niyə uğursuz olur

Portable Network Graphics (PNG) faylı diskret rəngli piksellərin ikiölçülü şəbəkəsi üzərində qurulmuş rastr formatdır. 64x64 piksellik PNG ikonu dəqiq 4096 ayrı pikselə malikdir. Standart masaüstü ekranında təbii ölçülərində göstərildikdə qrafika kəskin görünür. Lakin yüksək DPI smartfon displeylərində (Retina, 3x piksel nisbəti) baxıldıqda və ya həssas veb tərtibatında böyüdüldükdə brauzer rastr şəbəkəsini fiziki aparat pikselləri boyunca uzatmalı olur.

Rastr faylı həmin piksellər arasında nə olduğu barədə heç bir məlumat ehtiva etmədiyi üçün göstərmə mühərriki bixətti və ya bikubik filtrləmə kimi interpolyasiya alqoritmlərindən istifadə edir. Bu, görünən pilləli artefaktlar, bulanıq sərhəd kənarları və bulanıq keçidlər yaradır. Bunu nəhəng 4000x4000 PNG faylları ixrac etməklə həll etməyə cəhd ciddi səhifə şişkinliyinə səbəb olur, yavaş Core Web Vitals ballarına gətirib çıxarır və mobil internet paketlərini boşa xərcləyir.

Əksinə, Miqyaslana bilən Vektor Qrafikası (SVG) vizual sənəti XML-də kodlaşdırılmış saf riyazi bəyanatlarla təmsil edir. SVG faylı piksel ehtiva etmir; əvəzində yollar, çoxbucaqlılar, dairələr və kub Bézier splaynları kimi həndəsi primitivləri müəyyən edir (məsələn, <path d="M10,20 C30,40 50,20 70,80" />). Favikon kimi 16x16 pikseldə render edilsin və ya açıq havada rəqəmsal bilbordda 10 000x10 000 pikselə genişləndirilsin, brauzer riyazi tənlikləri real vaxtda yenidən hesablayır və sıfır ayırdetmə pisləşməsi ilə cərrahi kənar aydınlığı təmin edir.

2. Vektor izləmə və Potrace alqoritmləri necə işləyir

Bitmapı həqiqi vektor yoluna çevirmək sadəcə fayl uzantısını dəyişməkdən və ya şəkli SVG konteyner teqinə bükməkdən qat-qat mürəkkəbdir. Həqiqi vektorlaşdırma alqoritmik kənar aşkarlanması, kontur çıxarılması və polinomial əyri uyğunlaşdırması tələb edir — bu proses adətən vektor izləmə adlanır.

Brauzerdaxili vektorlaşdırıcımız məşhur Potrace mühərrikindən ilhamlanan qabaqcıl alqoritmik axınlardan istifadə edir. Proses dörd fərqli hesablama mərhələsində açılır:

Birincisi, binarlaşdırma və parlaqlıq həddi: yerli parlaqlıq dəyərlərini hesablamaq üçün rastr şəklin RGB kanalları qiymətləndirilir. Tənzimlənə bilən parlaqlıq həddindən yuxarı olan piksellər fon, aşağı olanlar isə ön plan yolları kimi təsnif edilir. Şəffaf PNG-lər üçün təsviri şəffaflıqdan təmiz ayırmaq məqsədilə alfa kanalı qiymətləndirilir.

İkincisi, yolun pikselsizləşdirilməsi və şəbəkənin çoxbucaqlılaşdırılması: alqoritm bitişik piksel klasterlərini müəyyən edir və marching squares və ya piksel altı kənar aşkarlanması ilə pilləli piksel sərhədləri ətrafında sıx, yüksək tezlikli çoxbucaqlı çəkir.

Üçüncüsü, çoxbucaqlının azaldılması və Douglas-Peucker sadələşdirməsi: kələ-kötür çoxbucaqlı iterativ olaraq sadələşdirilir. Artıq kollinear təpələr Ramer-Douglas-Peucker alqoritmi ilə silinir, istifadəçinin təyin etdiyi tolerantlıq hədlərinə hörmət edilərək yüzlərlə pilləli piksel əsas istiqamət vektorlarına yığılır.

Dördüncüsü, Bézier əyrisinin uyğunlaşdırılması: nəhayət, sadələşdirilmiş çoxbucaqlı seqmentləri ən kiçik kvadratlar optimallaşdırması ilə hamar kub Bézier əyrilərinə çevrilir. Mühərrik orijinal qrafikanın siluetini mümkün qədər az riyazi düyünlə yaxından izləyən ideal idarəetmə nöqtələrini (tutacaqları) hesablayır.

3. Çoxrəngli qatlama: mürəkkəb bitmapların rəng palitralarına ayrılması

Sadə monoxrom loqolar yalnız tək ağ-qara hədd keçidi tələb etsə də, real dünyadakı korporativ emblemlər və tətbiq ikonları tez-tez bir neçə fərqli brend rəngini ehtiva edir. Çoxrəngli PNG-ni təmiz SVG-yə çevirmək rəng kvantlaşdırması və qatlara ayırma tələb edir.

Vektorlaşdırma axınımız median-cut və ya k-means rəng kvantlaşdırması ilə bitmapın rəng paylanmasını skan edir. Şəkil diskret rəng müstəvilərinə ayrılır və hər rəng təcrid olunmuş binar bitmaska ilə təmsil olunur. Məsələn, üçrəngli idman emblemi qırmızı, mavi və sarı alt şəkillərə bölünür.

Hər rəng müstəvisi müstəqil olaraq hamar Bézier vektor konturları dəstinə izlənir. Sonra nəticədə yaranan yollar çoxqatlı SVG sənədinə yenidən yığılır, müvafiq HEX dolğu rəngləri təyin edilir və təmiz qrup teqlərinə (<g fill="#FF0000">) yerləşdirilir. Bu çoxpilləli qatlama çirkin rəng üst-üstə düşməsi və ya kələ-kötür rəng axıntısı olmadan aydın rəng sərhədlərini qoruyur.

4. Qüsursuz vektor izləmə üçün bitmapların ilkin emalı

İstənilən alqoritmik vektorlaşdırmanın keyfiyyəti böyük ölçüdə giriş bitmapının keyfiyyətindən asılıdır. JPEG sıxma artefaktları, bulanıq qradiyentlər və ya aşağı kontrastlı fonlarla çirklənmiş rastr qrafikası tez-tez minlərlə artıq idarəetmə nöqtəsi olan qeyri-sabit vektor yolları yaradır.

PNG-nizi optimal vektorlaşdırmaya hazırlamaq üçün bu təlimatlara əməl edin:

1. Fonu ayırın: qrafikanızın sıx və ya şəffaf olmayan fonu varsa, Şəffaf etmə və ya Fonu silmə utilitlərimizdən istifadə edin. Ön plan ikonunu ayırmaq kənar aşkarlama alqoritminin yalnız nəzərdə tutulan həndəsəni izləməsini təmin edir.

2. Kontrastı artırın və dithering-i aradan qaldırın: sərhədlər boyunca incə anti-aliasing olan boz tonlu loqolar bir neçə konsentrik vektor halqasına səbəb ola bilər. Qrafikanızı saf ağ-qaraya və ya yüksək kontrastlı ikirəngə həddə salmaq təmiz, təksərhədli vektor yolları verir.

3. Lazımsız kənarları kəsin: təsviri mərkəzləşdirmək və intuitiv SVG viewBox koordinat fəzası yaratmaq üçün artıq boşluğu Şəkli kəsmə alətimizlə kəsin.

5. Addım-addım: sıfır server yükləməsi ilə brauzerdə PNG-nin SVG-yə çevrilməsi

Ənənəvi vektorlaşdırma iş axınları qrafik dizaynerləri Adobe Illustrator kimi bahalı abunəlik proqramları almağa və ya mülkiyyət brend təsvirlərini faylları uzaq bulud serverlərində qeydə alan şübhəli onlayn çevirmə saytlarına yükləməyə məcbur edirdi. Brauzerə daxili SVG çevirici utilitlərimiz WebAssembly və Web Worker-lər ilə tamamilə brauzerinizin yerli sandboxunda icra olunur.

1-ci addım: PNG-dən SVG-yə alətinə keçin və PNG, WebP və ya JPEG faylınızı kətana buraxın. Fayl xarici serverə toxunmadan birbaşa brauzer RAM-ına yüklənir.

2-ci addım: izləmə parametrlərinizi tənzimləyin. Həndəsi dəqiqlik ilə minimal SVG fayl ölçüsü arasında ideal balansı tapmaq üçün rəng həddini, əyri hamarlığını və detal səviyyəsini incə tənzimləyə bilərsiniz.

3-cü addım: yaradılmış vektora real vaxtda önizləmə ilə baxın. Bézier idarəetmə nöqtələrinin brend spesifikasiyalarınıza dəqiq uyğun gəldiyindən əmin olmaq üçün kəskin bucaqları və əyri qövsləri böyüdün.

4-cü addım: təmiz SVG faylınızı endirin. Nəticədə yaranan SVG-ni birbaşa Figma, Illustrator, Inkscape-ə idxal edə və ya HTML/CSS kodunuza daxili olaraq yerləşdirə bilərsiniz.

6. SVG kodunun veb performansı və CSS üslublaşdırması üçün optimallaşdırılması

SVG faylınızı yaratdıqdan sonra müasir frontend mühəndisliyinin ən yaxşı təcrübələri onu istehsal saytlarına dərc etməzdən əvvəl əsas XML kodunu optimallaşdırmağı tövsiyə edir. Optimallaşdırılmamış SVG artıq ad fəzaları, redaktor metaməlumat teqləri və səkkiz onluq yerə qədər uzadılmış sürüşən nöqtəli koordinat dəqiqliyi ehtiva edə bilər (məsələn, 'd="M 10.3847291 45.9281726"').

Koordinat dəyərlərini bir və ya iki onluq yerə yuvarlaqlaşdırmaqla heç bir hiss olunan vizual dəyişiklik olmadan SVG fayl ölçüsünü 30%–50% azalda bilərsiniz. Bundan əlavə, kök <svg> elementindən sabit 'width' və 'height' atributlarını silib onları həssas 'viewBox="0 0 100 100"' atributu ilə əvəz etmək qrafikanızın ana CSS konteynerlərinə axıcı uyğunlaşmasına imkan verir.

Təmiz SVG vektor kodunun müstəsna üstünlüyü dinamik CSS manipulyasiyasıdır. SVG yol elementlərinizi 'fill: currentColor;' ilə tənzimləməklə vektor avtomatik olaraq ana konteynerinin şrift rəngini miras alır və dizaynerlərə interaktiv hover keçidləri və qaranlıq rejim uyğunlaşmalarını asanlıqla yaratmağa imkan verir.

7. Nə vaxt SVG, nə vaxt isə WebP/AVIF bitmaplarından istifadə etmək lazımdır

Vektor qrafikası həndəsi sənət üçün misilsiz olsa da, bütün veb şəkillər üçün universal əvəzedici deyil. Nə vaxt vektorlaşdırmaq və nə vaxt müasir rastr bitmapları saxlamaq lazım olduğunu anlamaq veb performansı üçün kritikdir:

SVG üçün ideal namizədlər: brend loqoları, interfeys ikonoqrafiyası, piktoqramlar, tipoqrafik imzalar, texniki CAD layihələri, elektrik sxemləri, həndəsi naxışlar və lazer kəsimi/CNC sxemləri. Bu istifadə hallarında SVG faylları adətən kiçikdir (2–15 KB) və sonsuz ayırdetmə təmin edir.

Vektorlaşdırma üçün uyğun olmayan namizədlər: davamlı tonlu fotoqrafik portretlər, mürəkkəb mənzərələr, diffuz işıqlandırmalı 3D render-lər və ekran görüntüləri. Fotoşəkli vektorlaşdırmağa cəhd izləmə mühərrikini yüz minlərlə mikroskopik rəngli çoxbucaqlı yaratmağa məcbur edir. Nəticədə yaranan SVG tez-tez 15 meqabaytı aşır, brauzer tablarını çökdürür və ləng render olunur. Fotolar üçün isə PNG-lərinizi PNG-dən WebP-yə çevirmə və ya JPG-dən AVIF-ə çevirmə alətlərimizlə müasir yeni nəsil formatlara çevirin.