CSS Sprite Nedir, CSS SVG Nasıl Kullanılır?

9 Ocak 2016
içinde Web Tasarım, CSS
Yorum yapılmamış
425

Gelişen ve değişen web ortamıyla beraber sürat kuşkusuz en büyük dostumuz olmuştur. Fakat bazı İnternet siteleri, hız ve erişim açısından bazı problemler yaşamaktadır. İnternet sitesinin temel görüntüsünü oluşturmakta olan CSS Sprite kullanımı ile CSS dosyalarınızda büyük bir küçülmeye imkan sağlayabilirsiniz. Aynı zamanda da görüntü kayıplarının önüne geçmenize ve daha önemlisi İnternet sitesinin hızında büyük avantajlar sağlayacaktır. Web tasarım hizmetinin en büyük avantajı SEO ile aynı paralelde ilerlemesidir. Temel kodlama düzeni ve hız konusunda yapılan optimizasyon çalışmaları arama motoru optimizasyonu alanındaki en büyük adımdır.

CSS Sprite: SVG Kodu

İnternet sitesinin temelini oluşturan vektör veya resimlerin SVG dosyasının hazır olması gerekmektedir. Genellikle İllustrator, Corel ve benzeri grafik programlarıyla SVG uzantılı dosyaya sahip olabilirsiniz. Site içerisinde yer alan tüm ikonlar, arka plan resimleri ve benzer temel faktörleri .svg uzantısıyla İnternet sitesine yüklemeniz gerekmektedir.

SVG Optimize

SVG optimize etmek için hazır kaynaklar üzerinden ilerleyeceğiz. WordPress alt yapısını kullanan ziyaretçilerimiz SVG Compressor olarak plugini indirip kurabilir. Çoğu eklenti ücretli fakat ücretsiz olanları da İnternet de bulmanız mümkün. Ben github üzerinden indirdiğim eklentiyle SVG dosyalarımı küçültme işlemi gerçekleştiriyorum.

SVG Oluşturma

CSS Sprite tekniğinden biraz daha dışarı çıktık, farkındayız ? Fakat şuanda hiç dikkatimizi bozmadan devam edelim. Sketch uygulaması yardımıyla bazı SVG ikonlarına hazır olarak ulaşabilirsiniz. Sizler için 4 tane hazır ikon paylaşmak gerekirse,

CSS SVG Kullanımı

CSS SVG Kullanımı

<!-- aircraft.svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="62" height="51" viewBox="0 0 62 51">
 <path fill="#000000" d="M38.9872..."></path>
</svg>

<!-- attachment.svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="64" viewBox="0 0 60 64">
 <path fill="#000000" d="M15.9264..."></path>
</svg>

<!--brush.svg-->
<svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62">
 <path fill="#000000" d="M7.8416..."></path>
</svg>

<!--camera.svg-->
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="52" viewBox="0 0 64 52">
 <path fill="#000000" d="M32,19.2 ..."</path>
</svg>

SVG uzantılı ikonların küçültme işlemlerini gerçekleştirdik. CSS Sprite tekniğiyle SVG dosyalarını İnternet sitesine yükleyeceğiz.Kodu oluşturduktan sonra display:none ile gizledik. Fakat hala o kısımda boşluk olduğunu gözlemledik. Bu aşama SVG Sprite’larının konumlandırmasını doğru şekilde yapmak için gerekli kuraldır.

<!DOCTYPE html>
<head>
 <title>SVG Sprites</title>
</head>
<svg style="display:none;">
 <!-- ikonlar buraya gelecek -->
</svg> 
</html>

Bu kod parçacığıyla oluşturulan boşlukları ortadan kaldırdık. Her svg için tanımlamamız gereken bir diğer öge ise, <symbol> etiketidir. Tıpkı div ögesi gibi her ikona tek tek tanımlamak gerekmektedir.

<!DOCTYPE html>
<head>
 <title>SVG Sprites</title>
</head>
<svg style="display:none;">
 <symbol id="aircraft" viewBox="0 0 62 51">
 <path fill="#000000" d="M38.9872..."></path>
 </symbol>
 <symbol id="attachment" viewBox="0 0 60 64">
 <path fill="#000000" d="M15.9264..."></path>
 </symbol>
 <symbol id="brush" viewBox="0 0 62 62">
 <path fill="#000000" d="M7.8416..."></path>
 </symbol>
 <symbol id="camera" viewBox="0 0 64 52">
 <path fill="#000000" d="M32,19.2 ..."</path>
 </symbol>
</svg> 
</html>

CSS Sprite Çağırma

<svg>
 <use xlink:href="#aircraft"></use>
 <svg>

Benzer İçerikler

Merkez Şube 0 850 477 75 20
Whatsapp
Anadolu Yakası Şube 0850 477 75 20