SVG Sprite nasıl oluşturulur ve yönetilir

SVG, web üzerinde ölçeklenen grafiklere geldiğinde yarış kazanıyor. Tasarımcılar ve geliştiriciler, simge fontları, raster görüntüler ve raster sprite yerine SVG'yi seçiyorlar.

SVG kullanmanın yararları çoktur fakat benim için ölçeklenebilirliğe dönüşür.

SVG kullanımı, dışa aktarılan kodun vektör tabanlı bir programdan kopyalanması ve yapıştırılması kadar basit olabilir. Oradan sorun, bu grafikleri en verimli şekilde sunmaktır.

SVG sprite girin. Bunlar, görüntü sprite gibi benzer bir şekilde çalışır, nasıl oluşturulduğu ve bir web sayfasına dahil edildiğinden çok farklıdır.

Neden Sprite kullanıyorsunuz?

Spritelar hızı artırmaya, tutarlı bir geliştirme iş akışını sürdürmeye ve simgeler oluşturmayı çok daha hızlı bir hale getirmeye yardımcı olur. SVG sprite'ları genellikle benzer bir şeklin veya formun ikonları kullanılarak oluşturulurken, daha büyük ölçekli grafikler tek seferlik uygulamalardır.

Çoğu durumda, bir simge kütüphanesi boyut olarak ölçeklenir. Yeni simgeler eklemek verimli ve sonuçta kolay olmalıdır. SVG spriteları bunu gerçeğe dönüştürüyor.

SVG Kodunu Verme

SVG'ler favori vektör grafik programınızdan ihraç edilebilir. Araçların bir karışımını kullanma eğilimindeyim ve bunların hepsinin SVG'leri ihraç etmek için büyük bir desteği olduğunu gördüm. kroki Özellikle bir simge veya grafik seçip komut + c'ye basıp SVG kodunun panonuza kopyalanabildiğinden özellikle dikkat çeker. Ardından, kod düzenleyicinize gidebilir, kodu yapıştırabilir ve grafiğin gözünüzün önünde tarayıcıda görünmesini sağlayabilirsiniz.

Web için SVG'yi Optimize Etme

Ne yazık ki, Sketch'den kopyalayıp yapıştırırsanız, kodun optimal olmadığını ve daha iyi bir şekilde iyileştirilebileceğini görebilirsiniz. Bunun için bazı araçlar var.

Özellikle Sketch'i kullanırsanız SVGO Kompresör eklentisi . SVG'leri dışa aktarırken eklenti, dosyayı kaydetmeden önce bunları otomatik olarak optimize eder.

Sketch'i kullanmıyorsanız, aynı işlevi kontrol edin. uygulama formu ya da web uygulamalarını tercih ederseniz, Jake Archibald senin için bir araya koy .

Elle SVG Sprite Oluşturma

Bir SVG sprite oluşturmak elle yapılabilir. SVG kodu oluşturabilecek bir vektör tasarım programına ihtiyacınız olacak. Bunun için Sketch'i kullanacağım ve birkaç simgeyi SVG olarak ihraç edeceğim.

Simgeleri dışa aktardıktan ve SVGO Compressor eklentisi ile çalıştırdıktan sonra, her simge için aşağıda yer aldım. Bu noktada her simgenin ayrı bir dosya olduğunu unutmayın:

Artık SVG'lerimizin optimize edilmiş olması, yukarıdaki kodu kullanarak hareketli grafiğin oluşturulmasına başlayabiliriz. Çevresi ile hareketli bir başlangıç ​​oluşturmak için

SVG'nin satır içi biçiminde bir görünüme sahip olduğuna dikkat edin : yok . Bu SVG sprite'ları uygun şekilde kullanmak için gereklidir. Simgeler sayfada oluşmayacak olsa bile, büyük miktarda alan olacaktır. SVG'nin yarattığı bu ekstra alandan kaçınmak için SVG'yi CSS ile saklıyoruz.

Basitçe simgelerin kodlarını dahil etmek bu noktada yeterli olmaz. Birinden faydalanmak zorundayız. SVG kodunun yanı sıra farklı genişlik ve yüksekliklerde gösterilebilecek ikonlar için önemli olan kendine özgü viewBox özniteliğini sağlamanıza olanak sağlayacak olan öğe.

İçerisinde tanımlanan öğeler Öğe yalnızca başvurulan tarafından tarayıcıya verilebilir öğesi.

Son hareketli grafik, aşağıdaki kod parçasına benzer:

Her sembol öğesine kimlik özelliklerini nasıl eklediğime dikkat edin. Bu önemlidir, çünkü sprite'daki belirli bir simgeye başvurduğunuzda, onu hedeflemek için benzersiz bir yönteme ihtiyacınız vardır. Ayrıca, her simgenin kendine özgü viewBox parametrelerine sahip olduğunu fark edin. İlk iki parametre neredeyse daima “0 0” olacaktır; İkincisi, dışa aktardığınız simgenin boyutuna eşit olacaktır.

Sayfada bir simge dahil

Tüm hazır olan hareketli yazıyla, bir sayfaya belirli simgeleri dahil etmenin bir yoluna ihtiyacımız var. Bunu yapmak için kullanacaksınız öğe şöyle yazılmıştır:

Sayfanızda, simgenin göründüğünü görmelisiniz ve bu gerçekten bunun için var!

SVG Sprite'larını Otomatikleştirmek

Satır içi SVG spitleri oluşturmak o kadar da zor değil. Sorun, birçok geliştiricinin sağlam uygulamalar için yüzlerce simge veya daha fazla şey için sprite oluşturması gerektiğidir. Böyle bir şeyi el ile oluşturmak zaman alıcı ve yorucu olabilir. Geliştiriciler, süreci otomatik hale getirmenin bir yoluna ihtiyaç duyarlar, böylece el ile sprite oluşturmaya vakit harcamazlar.

Neyse ki, böyle bir şey için araçlar var. Görev yöneticileri gibi Homurtu veya Yudum Kullanılabilecek eklentileri var. Bunlar SVG spritelarının oluşturulmasını kolaylaştırır. Belirli bir dizindeki her SVG dosyasını sağlayarak eklenti, yeni ve yeni bir hareketli grafiğe dahil edilmek üzere, başvurulan dizininizdeki tüm SVG'leri optimize eder ve üretir.

Sprite'a daha fazla simge eklemeniz gerekiyorsa, yapmanız gereken tek şey, simgeyi bir SVG olarak dışa aktarmak ve aynı klasöre eklemek. Oradan eklenti zaman alıcı kısmı ele alır.

Farklı lezzetlerde bulunan bazı eklentiler: hırıltı-svgstore , yudum-svg-cinler , svg-sprite .

Sonuç

Web geliştirmedeki her şeyde olduğu gibi, SVG spriteları oluşturmanın birden fazla yolu vardır. Bunlara harici olarak başvurabilirsiniz, CSS ile bunları dahil ve hatta onları duyarlı .