UltKit

SVG-ni WebP-yə çevirmək

Vektor faylını maketinizin tələb etdiyi dəqiq piksel enində WebP-yə çevirin. CMS SVG yükləməyə icazə vermədikdə, sosial önizləmə üçün rastr şəkil lazım olduqda və ya illüstrasiyada o qədər çox kontur olduqda ki, brauzer onu yavaş çəkir, bu, işinizə yarayacaq.

Şəkil çevirici

və ya JPG, JPEG, JPE … faylları bura sürüşdürün ·

Hər fayl üçün maks. 95 MB· 20 fayla qədər· 30 dəqiqədən sonra silinir

Nəticə

Fayllar serverlərimizdə emal olunur və 30 dəqiqədən sonra silinir.

Bu alətdən necə istifadə etməli

  1. 1

    SVG faylını yükləyin

    Figma, Illustrator, Inkscape və ya diaqram kitabxanasından ixrac edilmiş 20-yə qədər .svg faylı əlavə edin, hər biri 95 MB-a qədər.

  2. 2

    Çıxış enini təyin edin

    Nəticə şəklinin ölçüsünü dəyiş 1200 px enindən başlayır; onu şəklin səhifədə tutacağı enin iki mislinə dəyişin. Keyfiyyət 90-dır, düz rəngli loqo və ikonlar üçün isə Əlavə ayarlar bölməsində İtkisiz seçimini işarələyin.

  3. 3

    WebP-yə çevirin

    WebP formatına çevir düyməsinə basın və faylları ayrıca və ya bir ZIP kimi endirin. Şəffaf sahələr şəffaf qalır.

Cavab

SVG-ni WebP-yə konkret ölçüdə necə çevirim?

SVG-ni yükləyin, Nəticə şəklinin ölçüsünü dəyiş sahəsində lazım olan eni piksellə təyin edin (susmaya görə 1200 px) və WebP formatına çevir düyməsinə basın. Vektor həmin enində yenidən çəkilir, ona görə heç nə böyüdülmür və bulanıqlaşmır.

SVG nə zaman WebP-yə çevrilməlidir

SVG 2001-ciildə W3C Tövsiyəsi oldu və əksər loqo və ikonlar üçün düzgün formatdır: istənilən miqyasda kəskin qalan bir neçə kilobaytlıq mətn. Problem fayl öz kodunuzdan çıxanda başlayır. WordPress və bir çox hazır mağaza platforması SVG yükləməsini rədd edir, Facebook, LinkedIn və X-də link önbaxışları bitmap kimi çəkilir, dizayn alətləri isə illüstrasiyaları daxili raster effektlərlə ixrac edərək vektor faylı bir neçə meqabaytlıq koda çevirir.

Google-un 2010-da buraxdığı və Safari-nin nəhayət 2020-də 14-cü versiyada dəstəklədiyi WebP məhz bu iş üçün yaradılmış bitmapdır: eyni görünüşdə PNG-dən kiçikdir və əsl alfa kanalı var. SVG-ni birbaşa son ölçüdə WebP-yə çəkmək böyük PNG ixracı ilə adi dolanbac yolu aradan qaldırır. Tərs istiqamət də lazımdırsa, WebP-dən SVG-yə səhifəmiz bu istiqamətin niyə çevirmə deyil, izləmə tələb etdiyini izah edir.

Geniş yayılmış veb yerləri üçün SVG-dən WebP-yə ölçülər

40:21

1200 × 630 px

Open Graph link önbaxışı

Səhifə paylaşılanda göstərilən şəkil

16:9

1920 × 1080 px

Tam enli əsas illüstrasiya

1× ölçüdə əksər masaüstü ekranları əhatə edir

16:9

1600 × 900 px

Bloq sütunu şəkli, 2×

800 px-lik məzmun sütunu üçün

4:1

400 × 100 px

Başlıq loqosu, 2×

200 × 50 px loqo yeri üçün

SVG

Scalable Vector Graphics

SVG 2001-ci ildə W3C tərəfindən standartlaşdırılmış XML əsaslı vektor formatdır. Piksellər əvəzinə formaları, yolları və mətni təsvir edir, ona görə istənilən ölçüdə kəskin qalır və loqo və ikonlar üçün adətən çox kiçik olur. Şəffaflığı, CSS üslubunu, skriptləri və animasiyanı dəstəkləyir, hər brauzer onu doğma göstərir. SVG fotolar üçün uyğun deyil, mürəkkəb illüstrasiyaların göstərilməsi isə yavaşlaya bilər. Illustrator, Inkscape, Figma və brauzerlər onu aça və redaktə edə bilir.

Sıxılma
–
Şəffaflıq
Bəli
Animasiya
Bəli
İlk dəfə təqdim edilib
2001 · W3C
SVG konvertoru

WEBP

WebP şəkli

WebP Google tərəfindən 2010-cu ildə veb səhifələrin daha sürətli yüklənməsi üçün buraxılmış şəkil formatıdır. İtkili və itkisiz sıxılmanı, alfa şəffaflığı və animasiyanı tək formatda dəstəkləyir. İtkili WebP faylları oxşar görünüşlü JPEG-lərdən adətən 25–35% kiçikdir, itkisiz WebP isə çox vaxt PNG-dən kiçikdir. Bütün müasir brauzerlər onu dəstəkləyir, lakin bəzi köhnə masaüstü proqramlar, çap xidmətləri və yükləmə formaları hələ də rədd edir. Windows, macOS və əksər müasir şəkil redaktorları WebP fayllarını aça bilir.

Sıxılma
İtkili və ya itkisiz
Şəffaflıq
Bəli
Animasiya
Bəli
İlk dəfə təqdim edilib
2010 · Google
WEBP konvertoru

İnsanlar SVG-ni WebP-yə vektor fayllarını qəbul etməyən və ya yavaş çəkən yerlər (CMS, sosial önbaxış, yüklü landing səhifəsi) üçün yüngül, sabit ölçülü bitmap almaq məqsədilə çevirir; WebP-dən SVG-yə keçid isə format dəyişimi deyil, izləmə işidir.

SVG necə rastrlaşdırılır və nəyi yoxlamaq lazımdır

Çevirici SVG-nin öz en, hündürlük və viewBox dəyərlərini oxuyur, sonra hər konturu sizin təyin etdiyiniz enində çəkir; hündürlük tərəflər nisbətinə uyğun olur. Çəkiliş son ölçüdə aparıldığından nazik xətlər və kiçik mətn düzgün miqyasda yalnız bir dəfə hamarlanır. Kiçik PNG-ni sonradan böyütmək heç vaxt bu qədər təmiz görünmür.

Şriftlər adətən sürpriz yaradır. SVG daxil edilməmiş və ya konturlara çevrilməmiş şrift adı göstərirsə, ehtiyat şrift istifadə olunur və sətir uzunluqları dəyişir. İxracdan əvvəl dizayn alətində mətni konturlara çevirin. SVG daxilində URL ilə bağlanmış xarici şəkillər çəkilmir, ona görə onları daxil edin və ya işi əvvəlcədən düzləşdirin.

SVG-ni WebP-yə çevirmək: nə etməli, nə etməməli

EdinEtməyin
Göstərilən CSS eninin 2× ölçüsündə çəkinSVG kimi daha kiçik olan sadə daxili ikonları çevirməyin
Az rəngli düz loqolar üçün İtkisiz seçin600 px-lik yer üçün 4000 px enində çəkməyin
Gələcək ölçülər üçün SVG mənbəyini saxlayınE-poçt xəbər bülletenlərində WebP göndərməyin
Düzən sıçrayışının qarşısını almaq üçün WebP-ni en və hündürlük atributları ilə verinCanlı mətn gözləməyin: WebP pikseldir, seçilə bilən mətn deyil

SVG-dən WebP-yə çevirmə ilə bağlı suallar

SVG-ni WebP-yə çevirərkən hansı piksel enini seçməliyəm?

Şəklin CSS pikselləri ilə göstərildiyi eni götürün və iki qat artırın ki, yüksək sıxlıqlı telefon və noutbuk ekranlarında kəskin qalsın. 800 px-lik sütunda göstərilən illüstrasiya 1600 px enində hazırlanmalıdır. 3× veb üçün nadir hallarda özünü doğruldur, çünki fayl böyüyür, gözə görünən fayda isə azdır.

Sayt üçün WebP SVG-dən yaxşıdırmı?

Sadə loqo, ikon və diaqramlar üçün yox: təmiz SVG çox yüngüldür və hər ölçüdə kəskindir, ona görə saxlayın. WebP qradiyent, filtr və ya minlərlə konturu olan mürəkkəb illüstrasiyalar üçün, həmçinin yalnız bitmap qəbul edən yerlərdə (sosial şəbəkə önbaxışı, SVG dəstəkləməyən CMS) üstündür.

WebP SVG faylımın şəffaf fonunu saxlayırmı?

Bəli. WebP həm itkili, həm də itkisiz rejimdə tam alfa kanalına malikdir, ona görə SVG-də doldurulmayan sahələr şəffaf qalır. Fiqurların kənarları şəffaflığa qarşı hamarlanır və istənilən fon rəngində düzgün görünür.

Vektor qrafika üçün itkili, yoxsa itkisiz WebP?

İtkisiz rejim bir neçə düz rəngi olan loqo, ikon və qrafiklərə uyğundur; onlar çox yaxşı sıxılır və kənarlar tam təmiz qalır. 85–90 keyfiyyətli itkili rejim qradiyent, kölgə və ya teksturlu illüstrasiyalara uyğundur, çünki orada itkisiz fayllar ağırlaşır. Eyni faylda hər ikisini sınayın və təmiz görünən daha kiçik nəticəni saxlayın.

Niyə WordPress-ə SVG yükləyə bilmirəm?

WordPress SVG-ni icazə verilən yükləmə növlərindən çıxarır, çünki SVG skript daşıya bilər. O, 2021-də buraxılmış 5.8 versiyasından WebP qəbul edir, ona görə çevirmək media kitabxanasının təhlükəsizlik plaginsiz qəbul etdiyi fayl verir. Əsl vektora ehtiyacı olan saytlar yenə də təmizləyici plaginlə SVG dəstəyi əlavə edə bilər.

WebP-ni e-poçt bülletenində istifadə edə bilərəmmi?

Qaçının. Windows üçün masaüstü Outlook daxil bir neçə e-poçt proqramı WebP göstərmir, Gmail isə SVG-ni də göstərmir. E-poçt üçün işi əvəzinə SVG-dən PNG-yə ilə hazırlayın.