Web için SVG’leri Optimize Etme

Faydalı Alternatif Metin Yazma

optimize etme SVG’ler (ölçeklenebilir vektör grafikleri) web projeleri için dosya boyutunu küçültme gibi ikili avantajlara sahiptir. ve onlarla çalışmayı kolaylaştırır. Ancak birçok kez bir web projesi açtım ve SVG varlıklarının bazı basit optimizasyonlarla önemli ölçüde küçültülebileceğini gördüm. Bu makalede, web üzerinde SVG ile çalışmaya aşina olmayan bir tasarımcı veya geliştiriciyseniz size yardımcı olabilecek SVG varlıklarını optimize etme sürecimi paylaşacağım.

Simge yazı tipleri veya PNG’ler gibi SVG’nin avantajlarıyla zaten satıldığınızı varsayacağım – ancak değilseniz, işte kullanışlı bir makale seni ikna etmek için.

Birçok simge kitaplığı, zaten iyi optimize edilmiş SVG varlıkları sağlar. Ancak kendi grafiklerinizi oluşturuyorsanız veya grafikler başka bir tasarımcı tarafından sağlanıyorsa, bunları birkaç optimizasyon adımından geçirmek isteyebilirsiniz. SVG’lerimi oluşturmak ve düzenlemek için çoğunlukla Adobe Illustrator kullanıyorum. İşte Illustrator’da oluşturulmuş oldukça basit bir simge (Şekil 01):

Şekil 01

Bunu şuraya giderek kaydedebiliriz Dosya > Farklı kaydet ve “SVG” seçeneğini seçerek. Ancak, kaydettiğimiz SVG’nin koduna bir göz atarsak, oldukça şişkin olduğunu görürüz. Kod çok sayıda gereksiz veri içeriyor – daraltılabilecek gruplar, birleştirilebilecek yollar, programın kendisi tarafından oluşturulan meta veriler ve daha fazlası:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 800 800"
enable-background="new 0 0 800 800"
xml:space="preserve"
>

<g>
<path d="M90,675.6L424,97.1l48.5,28l-334,578.5L90,675.6z" />
<path
d="M547.6,279.3h70.2l-10.1,88.2l80.7-37l21.8,66.7l-87.3,17.6l59.9,65.8l-56.4,40.7l-43.8-76.8l-43.8,76.8l-56.4-40.7
l59.9-65.8L455,397.2l21.8-66.7l80.7,37L547.6,279.3L547.6,279.3z"

/>

</g>
</svg>

Her grafik programının kendi SVG kaydetme yöntemi olacaktır, ancak hangisini kullanırsanız kullanın, optimize edilmeden bırakılırsa yine de çok fazla ekstra veri içermeleri olasıdır. Bunu ortadan kaldırmanın ve amacımız için mümkün olan en küçük varlıklara hizmet etmenin bazı yollarına bakalım.

Paket çalıştırma

SVGO oluşturma sırasında SVG varlıklarınız üzerinde bir optimizasyon süreci yürüten bir NPM paketidir ve iş akışınızın bu parçasına benzer bir şey yapmak kesinlikle iyi bir fikirdir. Ancak görsel bir araç genellikle fazladan yolları ve grupları kaldırma konusunda daha iyi bir iş çıkarır ve istediğimiz sonuca bağlı olarak optimizasyon ayarlarımızı düzenlememize (ve önizlememize) olanak tanır.

SVGOMG ile hızlı bir galibiyet

Bu gereksiz verilerin çoğunu hızlı bir şekilde kaldırmanın bir yolu, içinden geçmektir. Jake Archibaldaracı, SVGOMG (Şekil 02). SVG dosyasını yükleyebilir veya doğrudan kodu yapıştırabilirsiniz ve seçilen seçeneklere bağlı olarak, SVG’niz olumsuz görsel etki olmadan büyük ölçüde zayıflayacaktır. Özellikle SVG’niz oldukça karmaşıksa, istediğiniz sonucu elde etmek için farklı seçeneklerle oynamanız gerekebilir, ancak genellikle basit simgeler için seçeneklerin çoğunu sonucu olumsuz etkilemeden kontrol edebileceğimi düşünüyorum.

Şekil 02SVG simgesi SVGOMG arayüz

SVGOMG üzerinden çalıştırdıktan sonra kod şöyle görünür:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620.2 606.5">
<defs/>
<path d="M0 578.5L334 0l48.5 28-334 578.5-48.5-28zM457.6 182.2h70.2l-10.1 88.2 80.7-37 21.8 66.7-87.3 17.6 59.9 65.8-56.4 40.7-43.8-76.8-43.8 76.8-56.4-40.7 59.9-65.8-87.3-17.6 21.8-66.7 80.7 37-9.9-88.2z"/>
</svg>

Bu, grafiği optimize edilmeden bırakmaktan çok daha iyidir, ancak gereksiz <defs/> öğe. Orijinal SVG, gruplar, katmanlar ve efektler içeriyorsa, SVGOMG gibi bir aracın onu ne kadar optimize edebileceğinin bir sınırı vardır. Grafik programımıza geri dönüp bazı düzenlemeler yaparsak çok daha iyi önceki bir optimizasyon aracıyla çalıştırıyor.

SVG’yi düzenleme

SVG kodunun nasıl yazılacağını biliyorsanız, bu en temiz, en yalın sonucu verebilir. için MDN belgelerine bakın. SVG yollarını çizme kılavuzuve bu video ile Heydon Pickering Bu konuda daha fazla bilgi edinmek istiyorsanız.

Ancak çoğumuz için bir SVG’yi düzenlemek yalnızca görsel bir araç kullanılarak pratik hale getirilir. Bu örnek için Adobe Illustrator kullanıyorum, ancak Sketch gibi diğerlerinin de benzer düzenleme yetenekleri var.

SVG’nizi düzenleyerek ne kadar kod çıkarabileceğiniz, karmaşıklığına ve kullanım durumuna bağlıdır. Aşağıdaki ipuçları genellikle simgeler ve basit grafikler için geçerlidir. Karmaşık çizimler genellikle nihai sonucu etkilemeden bu derecede düzenlenemez ve bazı durumlarda PNG’ler veya JPG’ler olarak daha iyi olabilir.

Grupları genişlet

Bir SVG’yi optimize ederken yaptığım ilk şey, tüm gizli katmanları kaldırmak ve mümkünse grupları genişletmek. Bu, herhangi bir <g> SVG kodundaki yolları gruplayan etiketler. Onlara stil vermeyi veya canlandırmayı planlıyorsanız, belirli grupları olduğu gibi tutmak isteyebilirsiniz. Kısayolu kullanarak Illustrator’da bir grubu genişletebilirsiniz. Vardiya + CMD + G (Şekil 03).

Şekil 03 Illustrator’da iki nesneli grubu gösteren katmanlar paneli

Yollara dönüştür

Daha sonra, mümkünse herhangi bir konturu doldurulmuş yollara dönüştürüyorum (Şekil 04). Illustrator’da bunu kullanarak yapabiliriz Nesne > Genişlet. Bazı istisnalar olabilir: stil veya animasyon yapıyorsanız stroke-dasharray veya stroke-dashoffset SVG’yi ölçeklerken kontur genişliğini korumak istiyorsanız, bunları olduğu gibi bırakmanız gerekir.

Konturdan önce ve sonra gösterilen simgeler genişletildi
Şekil 04 Konturdan önce ve sonra gösterilen simge genişletildi

Ayrıca Genişletmek Basit desenler gibi görüntünün alanlarını ayrı ayrı seçilebilen yollara dönüştürmek için Illustrator’daki seçenek. Karmaşık veya ayrıntılı desenler için bundan kaçınmak en iyisi olabilir.

Metni anahatlara dönüştürün

Metin tamamen dekoratifse veya içerik başka bir şekilde iletilecekse, örneğin bir başlık, düğme metni veya aria-label. SVG’yi kullanmak iyi olsa da <text> öğesi, özellikle SVG metninizi görüntülemek için başka bir web yazı tipi yüklemeniz gerekiyorsa, bunu yapmak her zaman mantıklı değildir. Metni Illustrator’da seçip seçerek yollara dönüştürebiliriz. Yazım > Anahatlara dönüştür.

Yolları birleştir

Artık SVG’mizdeki her şey bir yol olduğuna göre, mümkün olduğunca az yol çizilmesini sağlamak için bunları birleştirebiliriz. Bu “arama” simgesi örneğini alın: kesişen iki yol tek bir yol olarak birleştirilebilir ve tek bir yol elde edilebilir (Şekil 05).

Illustrator’da yolları birleştirmek için onları seçiyoruz ve birleştirmek seçeneğinde yol bulucu Menü.

Buradaki istisna, herhangi bir yolu ayrı ayrı stillendirmek veya canlandırmak istiyorsak – bu durumda onları birleştirmekten kaçınmalıyız.

Yolların birleştirilmesinden önce ve sonra gösterilen arama simgesi
Şekil 05 Yolların birleştirilmesinden önce ve sonra gösterilen simge

Fazladan yolları veya grupları silin

Yollar birleştirildikten sonra, katmanlar üzerinde son bir kontrol yapmayı ve süreçte oluşturulmuş olabilecek boş katmanları veya yinelenen yolları kaldırmayı seviyorum.

Sanat eseri sınırlarına sığdır

HTML’mde SVG simgesini kullandığımda, etrafında kurtulamayacağım fazladan boşluk kalması istemiyorum. SVG olsaydı durum böyle olurdu viewBox içeriğinden daha büyüktür. Illustrator’da seçiyorum Nesne > Çalışma Yüzeyleri > Resim sınırlarına sığdır yapmak viewBox boyutlar resme uygun (Şekil 06).

Şekil 06 Soldaki simge, gerekenden daha büyük bir viewBox’a sahiptir. “Resim sınırlarına sığdır”ı seçtikten sonra, simge, fazladan boşluk bırakmadan (sağda) görünüm kutusuna rahatça oturur.

dışa aktarma

Şimdi SVG’yi kaydetmeye hazırız. Illustrator’da seçebiliriz Dosya > Farklı kaydet ve format olarak SVG’yi seçin. Bir sonraki ekran bize SVG için bazı seçenekler sunacak. Stil seçenekleri için genellikle “Sunum niteliklerini” kontrol ederim.

Bu adımlar tamamlandığında, SVG artık bir optimizasyon aracından geçmeye hazırdır. Simgeler için genellikle kontrol etmekten kurtulabilirim çoğu Bu manuel optimizasyonları çalıştırdıktan sonra SVGOMG’deki seçeneklerden. Kodun çok daha temiz ve yalın olduğunu fark edeceksiniz! Ancak bu bile her zaman kaldırılması mümkün olan her şeyi kaldırmaz. Aşağıdaki kodda hala boş kaldım <defs> eleman, bu yüzden son bir manuel temizlik yapmaya ve kod düzenleyicimde bunu kaldırmaya değer. Artık SVG kullanıma hazır!

SVG’yi kullanma

SVG’ler, aşağıdakiler dahil olmak üzere web üzerinde çeşitli şekillerde kullanılabilir:

  • bir <img> etiket
  • İçinde background-image CSS özelliği
  • HTML’de satır içi

Spritelar

Özellikle simgeler için, performans ve esneklik açısından en çok satır içi SVG’ler sunar ve bunları genel olarak kullanmanın en iyi yolu, sprite. Bunu manuel olarak yapmak istemiyorsanız, SVG hareketli grafiklerini otomatik olarak oluşturan NPM paketleri mevcuttur. simge benzer bir hizmet sunan bir uygulamadır.

Daha sonra, bunları kullanmaya gelince, tüm SVG’ye yapıştırmak yerine, bunları şu şekilde referans alabiliriz: <use> eleman:

<svg xmlns="http://www.w3.org/2000/svg">
<use href="#myIcon" />
</svg>

Yolları kullandığımız için, tüm SVG’lere geçerli rengi kullanmak yerine mevcut rengi devralma talimatı vermek için aşağıdaki CSS’yi kullanabiliriz. fill bir simge sistemi için daha az kod yazmamıza yardımcı olacak özellik: Bir düğmede kullanılan bir SVG simgesi, düğmenin metin rengini devralır.

svg {
fill: currentColor;
}

kaldırmamız gerekecek fill CSS ile bu şekilde stil vermek için optimizasyon işlemi sırasında SVG’nin kendisinde öznitelik.

Çözüm

Bu, atılması gereken çok fazla adım gibi görünüyor, ancak aslında, seçtiğiniz grafik programında yolunuzu biliyorsanız, tüm süreç şaşırtıcı derecede az zaman alıyor. Birkaç denemeden sonra kas hafızası haline gelir. SVG simgelerini yerinde kullanmayı çok daha kolay hale getirmek için projenin başında toplu olarak çoğu SVG simgemi optimize etmeyi seviyorum. Grafiklerinizi yolun aşağısında çalışmayı kolaylaştırmak için önceden biraz zaman ayırmaya değer.

SVG hakkında daha fazla bilgi edinme

Sara Soueidan SVG ile ilgili her konuda tanınmış bir otoritedir ve konuyla ilgili bulabileceğiniz birçok ayrıntılı makale yayınlamıştır. burada. SVG bilginizi artırmak istiyorsanız bunları okumanızı şiddetle tavsiye ederim.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.