Tarayıcılar arası SVG simgeleri nasıl uygulanır. Tarayıcılar Arası SVG Simgeleri Nasıl Uygulanır? Temel SVG Öğesi Entegrasyonu

Bu kaynaklarda bulduğunuz simgeler, slayt gösterilerindeki bilgileri göstermek, kartvizitleri, menüleri, broşürleri ve daha fazlasını süslemek için de kullanılabilir.

Bu sitelerdeki simgelerin ücretsiz olduğunu yazdık, ancak herhangi bir zamanda değişebileceklerinden indirme koşullarına yine de dikkat edin.

01. Smashing Dergisi

22. PixelsMarket

26. Blugrafik

Blugraphic - PSD, PNG ve vektör simge seçenekleri. Arama, etiketlerle sınırlıdır, ancak haber bültenine abone olabilir ve ücretsiz olarak e-posta yoluyla haftalık bir koleksiyon alabilirsiniz.

27. Simge Şoku

Icon Shock, kişisel kullanım için binlerce ücretsiz simgedir. Ticari bir projede resim uygulamak için tek seferlik ödeme yapmanız gerekir.

28. CSS Yazarı

CSS Author, web'deki en iyi ücretsiz simgelerin haftalık seçimlerini sunar.

29. Yaratıcı Kuyruk

Yeni simgeler mi istiyorsunuz? Creative Tail'de başka hiçbir yerde bulamayacağınız paketler var.

30. Tamamen Ücretsiz İndirme

All-Free-Download, kolay arama ve PSD, PNG ve vektörlerin doğrudan indirilmesini sağlar.

31. Ego Simgeleri

Ego Icons, 1500'den fazla premium simge ve 100 ücretsiz vektör simgesi sunar. Ayrıca üst gezinme çubuğundaki düğmelere tıklayarak yan kuruluş sitelerini ziyaret edin.

32. AlienValley

AlienValley, e-posta adresiniz karşılığında çok çeşitli yüksek kaliteli simgelere sahiptir.

33. rüya

Dreamstale, atıfta bulunulmasına bağlı olarak size harika ücretsiz premium simgeler sağlayacaktır.

34. DuckFiles

35.1001 Ücretsiz İndirme

1001 Ücretsiz İndirmeler, pek çok hoş ve ilginç seçenekle birlikte gelen düz simgeler konusunda uzmanlaşmıştır.

36. GraphicsBay

37. Pixeden

Pixeden'de çeşitli boyutlarda simgeler arayabilirsiniz. PNG formatında 16x16'dan 512x512'ye kadar geniş bir seçim var.

38. İsim Projesi

NounProject kullanışlı arama, kolay yükleme ve yüksek kaliteli simgelerdir. Yazarın bağlantısı gereklidir. Aylık ücretle üyelik, indirme kısıtlamalarını ortadan kaldırır.

39. Iconmonstr

Iconmonstr, atıfta bulunmadan çeşitli boyutlarda simgeler sunar.

40. Füzyon plakası

PSD simgeleri, herhangi bir UI tasarımının vazgeçilmez unsurlarıdır, yazı tiplerine göre bile önemi daha düşük değildir, ancak pratikte, nadiren kimse her web projesi için kendi simgelerini geliştirmez. Öte yandan, kalite ve tasarıma uygun simgeleri bulmak da çok zaman alıyor, ancak bugün size yardımcı olmaya karar verdik ve tüm durumlar için ücretsiz simge setleri hazırladık.

01. Simgeler8

Icons8, herhangi bir format, boyut ve renkte 20 bin düz simgeden oluşan bir settir! İşletme, giyim, yiyecek ve daha pek çok kategori içerir. Icons8, bir Mac uygulaması veya ZIP arşivi olarak indirilebilir.

02. Freepik

Özel bir kaynak olan Freepik'in parlak vektör simgeleri koleksiyonu, sunulan pek çok simgeden yalnızca biridir. İş ve bağımsız projeler için idealdir. Ek olarak, PSD simgelerini .AI, .EPS ve .SVG formatlarında indirebilirsiniz.

03. Simge Bulucu

Bu siyah beyaz set, canlı işlevsel ve duygusal vektör simgelerinin bir kombinasyonunu içerir. Standart simgelere ek olarak, bu set, kendi projelerinize duygusal bir renk vermenizi sağlayacak kalp ve göz şeklinde simgeler içerir.

04.195 düz bayrak PSD simgeleri

Uluslararası bir web sitesi, çevrimiçi mağaza veya seyahat blogu geliştirirken kullanılabilecek harika bir web sitesi PSD simgeleri seti. 195 ücretsiz yuvarlak köşe simgesi içerir.

05. Metro UI Simge Seti

Windows 8 hayranıysanız, bu ücretsiz simge paketine göz atmalısınız. Her tür projede özgürce kullanabileceğiniz 700 iyi tasarlanmış simge içerir.

06. Modern UI Simgeleri

Windows veya Android / iOS için bir yazılım kullanıcı arayüzü oluştururken kullanılabilecek başka bir ücretsiz simge seti. Bu seti indirerek, Windows Phone'daki uygulama perdesi için simgeler de dahil olmak üzere 1000 adet düz, el yapımı simge alacaksınız.

07.350 piksel mükemmel simgeler

Uygulamalar veya web siteleri için inanılmaz derecede net 350 simge seti. Ancak, kalite kaybı olmadan yeniden boyutlandırılabilirler.

08.80 mini simgeler

Hem PSD formatında hem de ikonik yazı tipinde indirilebilen 80 adet mükemmel netlikte minyatür simge. Bu zarif ve sofistike PSD Sosyal Simgeleri, her tür proje için mükemmeldir.

09. Basit ve pratik web simge vektör grafiği

Kişisel ve ticari projelerde kullanmak için birçok yararlı simge.

10. Ücretsiz düz simgeler

Takvim, e-posta, saatler, haritalar ve daha fazlasını içeren düz stilde yapılmış bir dizi simge.

11. Mono simgeleri

Minimalist tarzda yapılmış 108 benzersiz monokrom simge içeren bir set. Hepsi 32 x 32 boyutunda PNG formatında mevcuttur.

12. Metrize simgeleri

Kendi uygulamalarınızda ve web projelerinizde kullanabileceğiniz ücretsiz Metro tarzı bir koleksiyon. Sosyal Medya Simgeleri PSD hem kişisel hem de ticari kullanım için ücretsizdir. Arşiv sadece PSD, SVG, ESP ve AI formatlarını değil, aynı zamanda web yazı tiplerini de içerir.

13. Sekme Çubuğu Simgeleri iOS 7

İOS 7'den esinlenerek kendi uygulamalarınızda kullanabileceğiniz zarif bir simge seti. Simgeleri şu formatlarda indirebilirsiniz: PSD, AI ve ESP.

14. Tıknaz Pika Simge Seti

Danimarka'dan Hollandalı Simge Ajansı tarafından oluşturulan pika tarzı ikonlar. Bu set, 42 mükemmel netlikte simge içerir.

15. İkonik

Minimalist tasarımlar için mükemmel bir başka basit ama göz alıcı simgeler kümesi. Iconic, PNG, SVG, SWC ve diğer formatlarda indirilebilen ve bunları kendi tasarımlarınıza uyarlamanıza izin veren açık kaynaklı bir settir.

16.44 Ücretsiz Simgelerin Tonları

44 simgeler kümesi. Forum için bunları kendi projelerinize göre kolayca düzenlemenize ve uyarlamanıza olanak tanıyan PSD simgeleri içerir.

17. Jeton simge seti

Token, ICO formatında 16 x 16 piksel, 32 x 32 piksel ve 256 x 256 piksel boyutlarında ve ayrıca 128 x 128 piksel boyutlarında PNG formatında bulunan 128 benzersiz simge içerir. Her simge koyu ve açık versiyonlarda sunulur ve bir PSD dosyasıyla tamamlanır.

18. Düz simgeler (PSD)

PSD formatında indirilebilen ve ihtiyaçlarınıza göre düzenlenebilen renkli düz stil ikonları.

19. Ücretsiz 32px simge seti

Herhangi bir amaç için bir PSD simgesi içeren bir set: Skype, Facebook, Twitter, RSS, bir fincan kahve, "beğenmek" ve daha fazlası.

20.48 düz tasarımcı simgeleri

Minimalizm hayranıysanız, bu seti kesinlikle beğeneceksiniz. Ofis görevlerini, sosyal yönleri ve seyahati temsil eden 48 ücretsiz simgeden oluşur. Hepsi AI ve PNG formatlarında mevcuttur ve kalite kaybı olmadan ölçeklenebilir.

21. Plex simge seti

Set, takvimler, antivirüs, saat, e-posta, Microsoft Office uygulamaları, sosyal ağlar ve çok daha fazlasını içeren 100'den fazla simge içerir.

22. Vectory mini bedava

Icojam ekibi tarafından tasarlanan 1000'den fazla PSD simgesi seti. Hepsi de PNG formatında sunulmaktadır. Hem kişisel hem de ticari projelerde ücretsiz olarak kullanılabildikleri için yeni bir web sitesi geliştirirken kullanım için idealdirler.

23. Eldorado mini bedava

40 x 40 pikselde 1200'den fazla simge içeren Icojam'dan başka bir mini simge koleksiyonu.

Duyarlı tasarım popüler bir konudur. Ekranlar uzun süredir standart çözünürlüklerin ötesine geçmiştir ve siteler hem avuç içi boyutunda cihazlarda hem de büyük monitörlerde görüntülenebilir. Site, cihaz boyutu ve piksel yoğunluğu ne olursa olsun aynı görünmelidir. Tasarımı ve içeriği uyarlamak için birçok farklı teknik ve teknoloji vardır. Bence vektör grafikler SVG, bu yöndeki en ilginç konulardan biri.

SVG, ikonlar için harikadır, ancak retina cihazlarında sabunlu görünmez ve kalite kaybı olmadan uzatılabilir.

Örneğin, 4 farklı boyutta bir SVG hareketli grafiği, orijinal 32 pikseldir:

SVG bu konuda harika bir iş çıkarıyor ve duyarlı düzenlerde kullanım için çok uygun.

Tasarım için simgeler hazır setlerden alınabilir veya kendi başınıza çizilebilir.

Hazır simge setleri

iconmelon.com

Çeşitli konularda geniş bir simge koleksiyonu. Yüklenen simgelerin kullanım kullanılarak HTML'ye eklenmesi önerilmektedir.

icomoon.io

En uygun araç. Yalnızca hazır simgeleri seçip indiremezsiniz, aynı zamanda kendi simgenizi yükleyebilir ve bunları bir yazı tipi ve / veya hareketli grafik biçiminde alabilirsiniz. Sprite ile birlikte PNG versiyonunun indirilmesi önerilmektedir.

flaticon.com

Geniş bir koleksiyon, ikonlar uygun şekilde kategorilere ayrılmıştır. Seçilen simgeler ayrı formatlarda (yazı tipi, SVG, PNG) veya bir defada indirilebilir.

Kendimizi çizeriz

Kendi simge kümenizi oluşturmak için bir vektör düzenleyiciye ihtiyacınız vardır:

• Adobe Illustrator bence en iyisi. Creative Cloud üyeliğinin bir parçası olarak 599 RUB / ay;
• Inkscape ücretsizdir ve çok kullanıcı dostu değildir;
• Sketch - Mac OS için 79,99 ABD doları. Vektörizasyonla ilgili bazı sorunları var, ancak genellikle oldukça kullanışlıdır.

Kilo kaybı

Bitmiş SVG dosyası genellikle çok fazla gereksiz şey içerir, ancak optimizasyona iyi gelir. Gereksiz nitelikler, boşluklar ve kısa çizgiler koddan çıkarılır ve noktadan sonraki karakter sayısı sayı olarak azaltılır. Eğe ağırlığı% 30-50 azaltılır. Optimizasyon araçları:

homurtu-svgmin - Grunt için bir görev svgo... Bu durumda, dosyaların kendileri kaynak klasörden alınacak, optimize edilecek ve sonuçların bulunduğu klasöre eklenecektir. Çok rahat.

Sprite veya simge yazı tipi?

Yazı tipi, hareketli grafiğe kullanışlı bir alternatiftir. Izgara ve simgelerin düzenlenmesi ile uğraşmanıza gerek yok, ek araçlar gerektirmesine rağmen yeni semboller eklemek uygundur.

Yazı tipini kullanarak sadece tek renkli simgeler değil, aynı zamanda çok renkli olanlar da yapabilirsiniz.

Örneğin icomoon.io/app/ adresinde kendi yazı tipinizi oluşturabilirsiniz. Yaklaşık eylem dizisi:

1. Setten simgeler seçin ve / veya kendi simgenizi yükleyin.
2. Aşağıdaki Yazı Tipi düğmesini tıklayın.
3. Bu adımda, simgelerin sembollerini yeniden atayabilir veya elde edilen yazı tipini hemen indirebilirsiniz.

Dört formattaki (.woff, .svg, .ttf, .eot) yazı tipiyle birlikte CSS ve demo dosyası yüklenir.

Gömülü yazı tipleri IE 8'de bile çalışır, ancak bazı modern tarayıcılarda beklenmeyen destek sorunları vardır. Opera Mini özel yazı tiplerini hiç desteklemez, Firefox yazı tipinin bulunduğu sunucu için büyü gerektirir (base64 kullanılarak çözülür), sekmeyi uzun süre açık bırakırsanız Chrome yazı tipini kaldırabilir:

ayrıca Windows7'de Chrome'da, katıştırılmış yazı tiplerinin bulunduğu sayfa açıldığında donabilir ve bazı diğer tarayıcılarda simgeler yerine herhangi bir şey görünebilir:

Chris Coer'in SVG Sprites ile Simge Sistemi makalesinden bir görüntü. Bir zamanlar hiyeroglifleri aynı yerde görmüştüm ama şimdi SVG var, bu yüzden ekran yapılamıyor. Bu arada, CSS hileleri, yeni tasarımında SVG'yi kullanmakta çok aktif ve yeni düzenleyici tasarımında Codepen geliştiricileri, SVG lehine simge yazı tiplerini kullanmayı bıraktı.

Kullanım kolaylığına rağmen, yazı tipi desteği sorunları şu anda bizi SVG simgelerini tercih etmeye zorluyor.

Umarım gelecekte gömülü yazı tipleri daha iyi desteklenecektir.

Bir sayfaya SVG eklemenin yolları nelerdir?

Sprite

Artıları:

• kısa okunabilir kod;
• resim önbelleğe alınır;

Eksiler:

• sunucuya istek;
• eski Operalarda, arka planda SVG tuhaf bir şekilde desteklenir: SVG arka planına sahip bir öğeye kenarlık eklerken sorunlar olabilir ve yalnızca Opera Mini'de, viewBox çalışmayan arka planlar;
• hareketli simgeler, sayfa stilleri için kullanılamaz;
• büyük sprite'lar performans sorunlarına neden olabilir.

Base64'ten veri URI'sine

Artıları:

• sunucuya herhangi bir istek yok.
• iyi tarayıcı desteği: Presto'da Opera ve eski IE dışında her şey.

Eksiler:

• resim önbelleğe alınmaz ve her seferinde yeniden oluşturulur;
• cSS'de uzun çizgi;
• okunamaz: ne içerdiği koddan anlaşılmıyor;
• şifreli resim orijinal olandan daha ağır olabilir;
• kodlama / kod çözme için ek araçlar gereklidir;
• simgeler sayfa stilleri için kullanılamaz.

SVG'den veri URI'sine

• sunucuya istek yok;
• nispeten okunabilir kod (okunabilir veya düzenlenebilir);
• kod çözme gerektirmez;
• sVG kodlanmışsa tüm modern tarayıcılar tarafından desteklenir.

Eksiler:

• önbelleğe alınmamış;
• cSS'de uzun çizgi;
• simgeler sayfa stilleri için kullanılamaz;
• yalnızca Webkit'teki tarayıcılar tarafından desteklenir.

Kullanım (SVG öğelerini yeniden kullanın)

Artıları:

• okunabilir kod;
• resimler başlık ve açıklama eklenebilir;
• sayfa stilleri için semboller mevcuttur. Simgelere fill \u003d "currentColor" da verebilirsiniz, bunlar metinle renklendirilecektir.

Eksiler:

• doğrudan HTML'ye eklenir. Öğeler, kullanılmadan önce satır içi SVG'de sayfanın üst kısmında bildirilmelidir. Belki de bulamadığım bir kitaplık kütüphanesi eklemenin daha zarif bir yolu vardır.

Yazı tipi

Artıları:

• uygun kod;
• tek yol, geri dönüşler olmadan IE8'de desteklenir;
• simgeler sayfa stilleri için mevcuttur ve metinle renklendirilecektir.

Eksiler:

• yazı tipi yüklenmemişse (henüz yüklenmemişse, hiç yüklenmemişse veya zaten kaldırılmışsa), simgeler yerine harfler veya unicode karakterler olacaktır veya hiçbir şey olacaktır.

Tarayıcı desteğiyle canlı örnek:

Örnek, tarayıcılar arası uyumluluğu sağlamaya çalışmadan olduğu gibi sunulmuştur. Demoyu ilgilendiğiniz tarayıcıda açabilir ve içinde farklı yöntemlerin nasıl desteklendiğini görebilirsiniz.

SVG desteği olmayan tarayıcılarda simgelerin görüntülenmesi

Şu anda, eklemenin en uygun ve güvenilir yolu hareketli yazı biçimidir.

IE8 ve daha eski sürümlerde görüntüleri değiştirmek için birden çok arka plan yöntemini kullanabilirsiniz:

Simge (background-image: url (your.png); / * PNG for IE6-8 * / background-image: url (your.svg), none;)

Eski Operalar için bu seçiciyi kullanabilirsiniz:

Yok yok: -o-prefocus, .icon (arka plan resmi: url (your.png);)

Böylece, farklı tarayıcılara sahip kullanıcılar için simgelerin yaklaşık olarak aynı görünmesini sağlamak mümkündür.

Simge eklemenin mevcut yollarından en çok sevdiğim yazı tipi. Destek sorunları olmasaydı mükemmel olurdu. CSS'nin mevcudiyeti ve başlık ve açıklama ekleme yeteneği cesaret verici olsa da, biçimlendirme ve tasarımın karıştırılmasıyla kullanımı sevmiyorum. Çok iyi, ancak yetersiz desteklenen başka bir yöntem var, ancak bu ayrı bir gönderi için bir konu.

UPD: Çok teşekkürler

Bu yazıda, SVG simgelerinin nasıl uygulanacağını, bir geri dönüşün nasıl uygulanacağını ve simgelerin bir SVG hareketli grafiğine nasıl dönüştürüleceğini göstereceğim.

Temel SVG entegrasyonu

Özellikle bu eğitim için, çevrimiçi bir kartvizit gibi davranacak tek bir sayfa kullanacağım. Orada hizmetlerimi kısaca sunacağım ve işimle ilgili profesyonel ağlardan üç profili göstereceğim. SVG simgelerini kullanacağız.

Yukarıdaki ekran görüntüsünde, iş profillerime sembolik olarak bağlanmak için simgeler (Twitter, Dribbble ve GitHub) kullandığımı görebilirsiniz. Bu simgeleri, vektör ve bitmap formatlarında birçok farklı simge ve sembole sahip olan flaticon'dan indirdim.

PNG ve SVG

Geriye dönük uyumluluk için bu simgelerin PNG sürümlerini kullanarak başlayacağız ve ardından SVG simgelerini tarayıcıları desteklemek için hazırlayacağız.

PNG simgelerini almak için Sketch kullandım ve SVG simgelerini hazırlamak için tekrar kullanacağım.

Yukarıdaki ekran görüntüsüne bakarsanız, sol paneldeki tüm grupları ve şekilleri uygun şekilde adlandırdığımı göreceksiniz (Adobe Illustrator, Katmanlar panelinde aynı listeye sahiptir). Tüm kaynakları doğru isimlendirmek çok önemlidir, bu sadece projenin iyi organize edilmesine yardımcı olmayacak, aynı zamanda bu dersin sonraki adımlarında da yardımcı olacaktır.

SVG sürümlerini dışa aktarma

Şimdi simgeleri, Sketch'teki Dilimleme aracıyla yapmak çok kolay olan SVG simgelerine aktarıyorum. Bu seçeneğin nasıl çalıştığına dair daha ayrıntılı bir açıklama için bkz. Çizim Dışa Aktarma Seçeneklerini Anlama. Bunları ayrı dosyalar olarak dışa aktaracağım ve projemdeki images klasörüne yerleştireceğim.

Normalde, bir sitede bir resmi görüntülemek için kaynağa src niteliğine sahip bir öğe veya benzer bir şey kullanarak bağlantı kurarsınız:

Ancak SVG dosyalarında, onu bir HTML belgesinde kullanmanın birkaç başka yolu vardır. Örneğin, doğrudan SVG kodunu kullanabilirsiniz - şöyle görünmesi gerekir:

Bu, XML biçiminde dışa aktardığım simgelerden biri. Bu kod HTML'ye çok benzer (yapısal bir biçimdir), bu da onu doğrudan sayfaya gömebileceğimiz anlamına gelir.

HTML'ye SVG Ekleme

PNG simgelerini çapaları ve bir kapsayıcı içeren temel bir HTML sayfasıyla başlayalım:

Şimdi SVG kodunu kopyalayıp yapıştıracağım, ancak dosya yerleştirme karakterini ve diğer öznitelik ayrıntılarını ifade eden en üst satırı görmezden geleceğim. HTML belgesi zaten kopyalanması gerekmeyen bilgiler içeriyor.

SVG'yi HTML sayfasındaki ilgili PNG simgelerinin hemen üstüne yerleştirdim. Şimdilik, normal PNG resim satırımı bir yorum etiketine saracağım, böylece SVG sürümünün yanında görünmeyecek

Temizleyici SVG

SVG'mdeki kodu da temizleyeceğim. Kaldırdığım parçaların çoğu SVG'nin davranışını değiştirmeyeceği için öznitelik öğelerini kaldırmak isteğe bağlıdır. Aynısını yapmak istemeniz durumunda, önceki ve sonraki kod:

Hangi öğeleri kaldırdığımı görün. Elementler

O zaman oraya simgeler koymam gerekiyor. SVG'nin tamamını sarmam gerekmiyor, yalnızca içeriğiyle grup öğesini sarmam gerekmiyor. Bunu bir öğeye yerleştirebilirim

Not: Grunt kullanmakta rahatsanız, işte tüm bireysel SVG dosyalarının birleştirilmesini otomatikleştiren bir eklenti.

Saklamak!

Şimdi kafamızda tüm SVG simgeleri var ve bunları gizlememiz gerekiyor; yeni svg\u003e 'ye display \u003d "none" özniteliği ekleyin; bu, sayfanın üstünde hiçbir simge görünmeyeceği anlamına gelir.

Her bir SVG simgesini tanımlama

Bir sonraki adım, her bir simgeyi, daha önce defs öğesini kaldırdığımız sayfada kullanılabilecek şekilde tanımlamaktır. Bu etiketin yardımıyla tüm grupları sarmamız gerekiyor, tüm simgeleri buna göre sarıyoruz, onları sayfanın herhangi bir yerinde yeniden kullanmak istediğimi belirtebilirim.

SVG simgeleri nasıl kullanılır

Simgeler artık tanımlandı, ancak bunları kullanma yöntemini de belirtmemiz gerekiyor ve bunun için kullanım öğesini alıyoruz. Eleman herhangi bir öğeyi almanıza izin verir ve sayfanın herhangi bir yerinde arayın. Bir öğeyi kimliğine göre seçiyoruz, bu nedenle Sketch belgesinde simgeleri doğru şekilde adlandırmak önemliydi. Yukarıdaki örnekteki kimliğe bir göz atın ve öğelerini kullanarak her birine nasıl başvurduğuma bakın .

Her şeyi benim yaptığım gibi yaptıysanız ve herhangi bir hata yapmadıysanız, grafiklerin görüntüsünde herhangi bir değişiklik görmezsiniz, ancak artık SVG simgelerini (ihtiyacınız olan herhangi bir boyutta) yeniden kullanabilir ve her birini sayfada istediğiniz kadar arayabilirsiniz.

SVG sprite'ımızı iyileştirme

SVG sprite kullanmanın bir başka artısı, sayfa kodunun çok daha temiz ve sitede çalışan diğer kişiler tarafından okunmasının daha kolay olmasıdır. Sonucu biraz daha iyileştirebiliriz. En altta elemanları değiştirdim SVG hareketli grafiğimde sembol öğesine, ayrıca viewbox niteliğini sayfadaki SVG öğelerinden yeni sembol öğelerine taşıdım.

Kullanma Örneğimde sadece anlamsal olarak daha doğru değil, aynı zamanda öğelerle birlikte viewbox özelliğini tekrarlama ihtiyacını da ortadan kaldırır. Not: Elemanların içeriğinin varsayılan olarak IE7'de görüntülenir.

Grup öğesini sembole değiştirerek. Tüm bu iyileştirmeleri uygulayabiliriz. Öğe kaldırılabilir bir SVG hareketli grafiğinden, kodu daha da temiz hale getirir.

Sonuç

Basit bitmap simgeleriyle başlayan şey, ihtiyacınız olan her yerde ve ihtiyacınız olan her boyutta kolayca uygulanabilen süper güçlü bir vektör grafik kümesine dönüştü. Umarım bu eğitim sizin için yararlı olmuştur ve bir sonraki projenizde SVG simgelerini denemeye ve oluşturmaya devam edeceksiniz.

SVG'yi web'de kullanılmak üzere hazırlamak çok basit bir işlemdir, JPEG veya PNG'yi dışa aktarmaktan daha karmaşık değildir. Kullanmayı planladığınız görüntü boyutuyla aşina olduğunuz grafik düzenleyiciyi (Illustrator, Sketch, Inkscape [ücretsiz] ve benzerlerini [veya şekiller içeren katmanları kullanıyorsanız Photoshop]) kullanın. Genellikle Illustrator'da çalışıyorum, bu yüzden bu programda dosya hazırlamanın bazı yollarını açıklayacağım, ancak genel olarak başka herhangi bir programa uygulanabilir. Metni eğrilere dönüştürmek isteyebilirsiniz, çünkü elbette bunları sayfada kullanılan web fontu ile biçimlendirmeyi planlamadığınız sürece font yanlış görüntülenir (bu mümkün!). Ayrıca tüm nesneleri tek tip şekillere dönüştürmemelisiniz, özellikle de sayfada kontrol edilmesi gereken bir konturunuz varsa, özellikle de nesneleri dönüştürmek genellikle dosya boyutunu küçültmez. Gruplara veya katmanlara atanan adlar, SVG'ye öğe kimliği olarak eklenecektir. Bu, stil oluşturma için oldukça kullanışlıdır, ancak genel dosya boyutunu biraz artıracaktır.

Dışa aktarmadan önce, tüm görüntülerin bir tamsayı piksel ızgarasında olup olmadığını kontrol etmeniz gerekir (yani, 23,3 piksel x 86,8 piksel değil). Aksi takdirde, görüntü büyük olasılıkla net olmayacak ve görüntünün bir kısmı kırpılacaktır. Illustrator'da bunu şu şekilde yapabilirsiniz: Nesne\u003e Çalışma Yüzeyleri\u003e Sanat Eseri Sınırlarına Sığdır. Ardından farklı kaydet'e basın ve SVG'yi seçin ve varsayılan ayarları bırakın. Burada biraz optimizasyon yapabilirsiniz, ancak buna değmez, çünkü daha sonra farklı geliştirme hileleri uygulayacağız, bu yüzden şimdi bu ayarlarla zaman kaybetmeyeceğiz.

Dosya boyutlarını küçültme teknikleri.

(Optimizasyona bakın)

En küçük SVG boyutunu elde etmek için, gereksiz olanların tümünü ondan kaldırmak mantıklı olacaktır. SVG'yi ele almak için en ünlü ve faydalı program (en azından öyle düşünüyorum) SVGO. Gereksiz tüm kodları kaldırır. Fakat! SVG'yi CSS / JS ile değiştirmeyi planlıyorsanız bu programı kullanırken dikkatli olun, çünkü bu, kodu çok fazla temizleyebilir ve daha fazla değişiklik yapılmasını zorlaştırabilir. SVGO'nun bir başka rahatlığı, otomatik proje oluşturma sürecine dahil edilebilmesidir, ancak şunu da kullanabilirsiniz: GUI Eğer istersen.

Gereksiz olanların doğru bir şekilde kaldırılmasıyla daha ayrıntılı olarak anlayarak, grafik düzenleyicide başka bir şey yapabiliriz. İlk olarak, mümkün olduğunca az yol / şekil ve bu yollardaki noktalar kullandığınızdan emin olun. Basitleştirilebilen her şey birleştirilebilir ve basitleştirilebilir ve gereksiz noktalar kaldırılabilir. Illustrator, noktaları kaldırmanıza ve genel şekli aynı bırakmanıza yardımcı olacak Akıllı Kaldır Fırça Aracı ile bir VectorScribe eklentisine sahiptir.

Ön optimizasyon

Smart Remove Brush Tool kaldırılan noktalar

Ayrıca görüntüyü büyüteceğiz. Illustrator'da, Görünüm\u003e Piksel Önizleme'yi açmak ve yolların nasıl konumlandırıldığını kontrol etmek kullanışlıdır. Yolları ızgaraya yerleştirmek biraz zaman alacaktır, ancak bu çaba işe yarayacak ve daha keskin render elde etmenizi sağlayacaktır (buna önceden dikkat etmeniz daha iyidir).

Izgaranın dışındaki noktalar

Kılavuza hizala

Hizalanacak iki veya daha fazla nesne varsa, tüm gereksiz örtüşmeleri kaldırın. Bazen, ana hatlar dikkatlice hizalansa bile ince beyaz bir çizgi görülebilir. Bunu önlemek için, nesneleri biraz üst üste bindirebilirsiniz. Önemli: SVG'de, z-endeksinin altta bulunan nesneye bağlı olarak belirli bir sırası vardır, bu nedenle en üstteki nesneyi kodda dosyanın altına yerleştirmeye değer.

Ve son olarak, genellikle unutulan şey, sitenizde .htaccess dosyasında gzip SVG sıkıştırmasını etkinleştirmektir.

AddType resmi / svg + xml svg svgz AddOutputFilterByType DEFLATE "resim / svg + xml" \\ "text / css" \\ "text / html" \\ "text / javascript" ... vb

Bu tekniğin ne kadar etkili olduğuna bir örnek olarak, orijinal Sınırları Kırma logosunu kullanacağım ve şu şekilde optimize edeceğim: boyutu olması gerekene kadar artırın; Konturları düzelteceğim; mümkün olduğu kadar çok noktayı silin; noktayı tamsayı piksellerle hareket ettirin; tüm örtüşme alanlarını taşıyın ve hepsini SVGO'ya gönderin.

Orijinal: 1,413b

Optimizasyondan sonra: 409b

Sonuç olarak, dosya boyutu ~% 71 küçüldü (ve sıkıştırma ile ~% 83 küçüldü)