GirişPiktogramlar kümesi. Sprite veya Simge
Tasarım trendlerdeki değişikliklere rağmen kullanıcı arayüzüBu yıl önceki yıllarda izlediğimiz kadar önemli değildi, açıkça daha mükemmel, daha uzmanlaşmış, tamamen kaplı ve daha önce popüler simgelerden gelen tüm en iyi stilleri karıştırıyordu.
Belki de bu yıl tasarım simgeleri için son derece "verim" değildi, ama yine de, birkaç İlginç setlerDikkatinizi hak eden, hala ufku yaktı. Bu derlemede, en iyisini göz önünde bulundurmayı öneriyorum (tamamen benim görüşüme göre) Ücretsiz koleksiyonlar Görünen simgeler açık Erişim 2017 için. Tüm setler kesinlikle ücretsizdir ve herhangi bir kısıtlama olmadan indirilebilir. Her görüntünün altında, en sevdiğiniz simge seti ile ayrıntılı olarak tanışabileceğiniz ve indirmek isterseniz, kaynaklara bağlantılar vardır.
Kontur veya doğrusal simgeler, web geliştirme dünyasında çok popülerdir, çünkü bilgilerle ödün vermeden, formların ve minimalizmin özel sadeliğinden farklıdır. Ek olarak, çoğu, sunulan piktogramlar yalnızca siteler için değil, uygulamalar için de harikadır. android platformu ve iOS.
Tüm durumlar için gerçekten büyük bir yüksek kaliteli simgeler koleksiyonu. Bugüne kadar, herhangi bir formatta yaklaşık 60.000 simge, boyut ve renk sunulur. Kütüphane günlük olarak güncellenir ve günde 3 ila 20 simgeler arasında yenilenir.
Numara: 60 000 +
Formatlar: Svg, ai, eps, png, pdf, yazı tipleri
Paket, beyaz ve siyah zemin üzerine 1800 simge içerir: .Sketch .psd .ai .svg .eps ve .png..
Formatta küçük bir yüksek kaliteli doğrusal simgeler kümesi .Ai
Biçimlerde 70 vektör simge ücretsiz paketi .Sketch .ai.
Formatlardaki vektör simgeler AI, eps. ve SVG.
İyi set 90 ücretsiz anahat simgelerinin yanı sıra, kroki ve illüstratör için sağlam bir arka plana sahip simgeler.
Baytlık.
Mükemmel ücretsiz simge formatında kümesi SVG.. Her simge, 32 x 32 ızgarada manuel olarak kodlanır ve maksimum stil esnekliği sağlayan SVG çubuğunu kullanır; Bu, ağırlık, renk, boyut ve gerekirse özelleştirebileceğiniz anlamına gelir, kenarları simgeleri yuvarlanır veya kare yapın.
Set, popüler image editör araçlarının 38 kontur simgesini sunar, ücretsiz indirme simgeleri için AI, EPS, SVG formatlarında ve şeffaf PNG (1024PX) mevcuttur.
Biçimlerde kesinlikle ücretsiz, kontur simgeleri harika bir set .png .pdf .svg .sketch .ai
Küçük bir yüksek kaliteli mini simge kümesi.
Biçimler: AI, EPS, PNG, SVG
Boyutlar: 16 x 16, 32 x 32
Saf CSS simgeler
İncelemenin bu bölümü, ücretsiz erişim paketleri simgeleri sağlayan kaynakları sunar saf CSS.. Görüntüleri simgeler olarak kullanmak için mükemmel bir alternatif. Simgelerin bu tür kitaplıklarını bağlamak için, bir dosya yeterlidir. CSS, çoğunlukla, bu kaynaklar, simge kümelerini doğrudan sunucularından bağlayabilme yeteneği sunar.
512 simge içerir, kütüphane düzenli olarak doldurulur.
Saf CSS'de küçük kütüphane simgeleri.
Renkli çok renkli simgeler kümeleri
Taze pastel renklerde 30 renk doğrusal simgeler kümesi. Kit, vektör formatında (SVG) ve farklı boyutlarda png simgeleri içerir.
PSD formatında 120+ ücretsiz renkli simgeler
30 düz izometrik simgeler koleksiyonu. Sette bulunan tüm simgeler tamamen düzenlenmiş ve Illustrator'da yapılandırılmıştır. Çeşitli png boyutlarını tamamlayın.
Biçimler: Ai, eps, png
Boyutlar: 57PX, 114PX, 228PX, 456PX, 912PX
Su sporları temalı 24 çok renkli simge kümesi. Scons SVG formatında tedarik edilir ve bir ışık, yaz rengi şeması ve optimum ölçeklenebilirlik kullanılarak tasarlanmıştır.
Malzeme tasarımında simge kümeleri
Bu tür ikonlar, Google'da sunulan "malzeme" tasarımının birleşik tarzında gerçekleştirilen uygulamalar için standart hale gelmek üzere tasarlanmıştır. android sürümü 5.0. Aynı zamanda, Android uygulamaları ve iOS için ve web uygulamaları için eşit derecede uygundurlar.
Eskiz formatında 250 simge
Bu, kroki uygulaması için 900+ Google Icons dizidir. Hepsi başlangıçta google kitaplıklarıperiyodik olarak güncellenir ve yenilenir.
Karakter ve sembollerin simgeleri
Çeşitli karakterlerin ve piktogramların ücretsiz simgeleri kümeleri.
Evrensel Temalar - vektör simgeler kümesi
Kit, tasarlanmış 100 vektör simge içerir modern Talepler Web tasarımı, simgeler SVG formatında sunulur, böylece ihtiyacınız olan sonucu elde edene kadar simgelerin rengini düzenleyebilir, ölçekleyebilir ve değiştirebilirsiniz.
Formatlarda 90 sevimli, çok amaçlı simgeler kümesi .sketch. ve .Ai
Psd, ai, eps, pdf, svg, kroki, webfont ücretsiz simgeler kümesi
Hafif ve koyu renkli bir arka plan için iki versiyonda 70 temel simgeler iyi gelişmiş bir ücretsiz set. AI ve eskiz dosyaları tamamlandı.
100 font simgesinin ücretsiz kütüphanesi, ayrıca arşivde, demo sayfasının tüm kodlarını, Web Fonts I.SVG dosyalarının formatlarını sağladı.
UI Kullanıcı Arabirimi Seti, kullanıcı arayüzlerinin özelliklerini, SVG formatında, kontur ve renk sürümlerinde simgelerin özelliklerini karşılamak için tasarlanmış 100 vektör simge içerir. Bu simgeleri kişisel ve ticari projelerinizde serbestçe kullanabilirsiniz.
Grafik ve Web Tasarımcısı Simgeleri Setleri
Bu set, kontur tarzında 33 tamamen ölçeklenebilir vektör simge içerir. Her simge EPS, AI, PSD, PNG ve SVG formatlarında mevcuttur.
Kategori Tasarım Rakamlarından 25 Simge
Etkileyici set güzel simgeler El yapımı, 25 kolayca düzenlenebilir ve tamamen ücretsiz simgeleri kullanmaya hazır. İki renk seçeneğinde (Mango ve Icicle) ve tüm rahat formatlar: AI, EPS, SVG ve PNG.
Bu simgeleri kişisel ve ticari projeler için kullanabilirsiniz.
Biçimler: AI, EPS, SVG, PNG
Boyutlar: 16 x 16, 32 x 32
Sanatsal aletler simgeler kümesi
Bir dizi ücretsiz simgeler, Illustrator AI I.SVG formatlarındaki ve içinde olduğu gibi vektör dosyalarını içerir. png formatıSeçenekler, hem renklerde hem de doğrusal stillerde, 5 boyutta (32px, 64px, 128px, 256px ve 512px) mevcuttur.
Simgeler tüm kullanışlı formatlarda sunulmuştur: EPS, AI, SVG ve PNG.
Düz simgeler kümeleri
Bu bölüm, en iyi düz stil geleneklerinde en farklı temalara ücretsiz simge kümelerini sunar. Tasarımdaki düz simgelerin kullanımı, bir web sitesi veya kullanıcı için şık, modern ve daha anlaşılır bir uygulama yapmanıza izin verecektir.
Blobs.
Formatlarda sunulan parlak renk şemalarında 1000+ simgelerin ücretsiz seti (AI, PSD & SVG)
Düz çizgi - UX & E-Ticaret Icons Set
Kullanıcı arayüzü için düz stilde 83 simgeler ve e-ticaret
Düz tasarımdaki büyük bir simge seçimi de dahil olmak üzere kişisel ve ticari kullanım için çeşitli stillerde gerçekten büyük bir simge kütüphanesi. Ücretsiz simgeler, 72 piksel ve PNG formatında farklı boyutlarda mevcuttur. İhtiyacınız olan boyutu seçtikten sonra hem tüm paketi hem tüm paketi hem de simgeyi istediğinizi ayrı ayrı indirebilirsiniz.
Çalışma alanını tasarlamak için simge kümesi AI & EPS formatlarında ücretsiz erişime sunulmuştur.
SET, SVG ve PNG formatlarında 70 farklı kullanıcı arayüzü simgesini sunar.
İş ikonları ve e-ticaret kümeleri
Bankalar ve para için 36 ücretsiz simge kümesi, bu düz stil ikonları, banka faaliyetleri ile ilişkili uygulamalar veya web siteleri için idealdir. Simgeler vektör formlarında sunulur (AI, PSD, EPS, PNG ve SVG) ve bu nedenle kolayca düzenlenir ve değiştirilir.
Set, sepet durumu simgeleri, ödeme yöntemi simgeleri, teslimat simgeleri ve çok daha fazlası dahil olmak üzere, e-ticaretin tüm ana alanlarını kapsayan 50 parlak simge ile tamamlandı. İki SVG ve PNG formatındaki simgeler sunulur, bunları kişisel ve ticari projelerinizde serbestçe kullanabilirsiniz.
Düz stil bir işletme konularında 50 renkli simge AI ve SVG formatlarında sunulmaktadır, bu nedenle, adaptif web tasarımları için ideal olan görüntü kalitesini kaybetmeden kolayca ölçeklenebilirler. Onları kişisel ve ticari projelerinizde serbestçe kullanabilirsiniz.
E-ticarette 40 vektör simgeler ücretsiz set. Ücretsiz sürüm Adobe Illustrator (.ai), PDF ve Kapsüllenmiş PostScript (.eps) dosyalarını içerir.
Hava konusundaki simge kümeleri
Formatlarda 30 olağanüstü simgeler içeren hava durumu simgeler paketleri .png. ve .sketch.. Uygulamaların ve hava durumu web sitelerinin tasarımına mükemmel uyum.
Büyük CSS simgesi Yazı Tipi Simgeleri 222 Hava Simgeleri ile Bootstrap'a veya yüksek kaliteli meteorolojik simgelerin ihtiyaç duyduğu diğer bir projeye bağlanmaya hazır. Set düzenli olarak güncellenir ve yenilenir.
Tabii ki, seçimde sunulan kaynaklar, daha önce tüm tasarım gelişmelerinin sadece küçük bir parçasıdır ve bu yıl boyunca ortaya çıkmıştır. Popüler ve uzun zamandır kanıtlanmış kaynaklar, çoğu bir görünüme ihtiyaç duymaz, böylece bu gözden geçirme Nispeten yeni ve kaliteli iş tahsis etmeye çalıştım. Umarım birileri kullanışlı olur.
Her saygı ile Andrew
Simgeler PSD, her türlü tasarımın vazgeçilmez bir unsurdur, ancak fontların önemini bile düşük değil, ancak pratikte her web projesi için kendi simgelerin geliştirilmesinde nadiren nadiren nadirdir. Öte yandan, simgelerin uygun kalitesi ve tasarımı arayışı da çok zaman alır, ancak bugün size yardım etmeye karar verdik ve tüm durumlar için ücretsiz simge kümesi seçimi hazırladık.
01. Simgeler8.
Simgeler8 - Herhangi bir formatta, boyutlarda ve renkte 20 bin düz simgeler kümesi! İşte iş, giyim, yemekler ve diğerleri gibi kategoriler. Simgeler8 Mac için bir uygulama olarak veya bir zip arşivi biçiminde indirilebilir.
02. FREEPIK.
Vektör simgelerinin parlak koleksiyonu Özel Kaynak Freepik, sunulan setlerden sadece bir tanesidir. İş ve bağımsız projeler için idealdir. Ek olarak, PSD simgeleri indirin .AI, .EPS ve .SVG formatlarında olabilir.
03. IconFinder
Siyah ve beyaz yapılan bu set, açık fonksiyonel ve duygusal vektör simgelerin bir kombinasyonu içerir. dışında standart simgeler Bu kit, kalpler ve gözler şeklinde simgeler içerir, bu da kendi projelerinizi duygusal renk vermenize izin verir.
04. 195 Düz Bayrak PSD Simgeleri
Uluslararası bir site, çevrimiçi mağaza veya seyahat blogunun geliştirilmesinde kullanılabilecek bir site için mükemmel PSD simgesi. Set, köşeleri yuvarlatılmış 195 ücretsiz simge içermektedir.
05. Metro UI Icon Set
Eğer bir Windows 8 fanıysanız, bu ücretsiz simgeler kümesini tanımalısınız. Her türün projelerinde serbestçe kullanılabilecek 700 iyi dekore edilmiş bir simge içerir.
06. Modern UI Simgeleri
Bir kullanıcı arayüzü oluştururken kullanılabilecek bir başka ücretsiz simge kümesi yazılım Windows için veya Android / iOS için. Bu seti indirerek, Windows Phone'daki uygulama perdeleri için simgeler de dahil olmak üzere el ile oluşturulan 1000 daire alacaksınız.
07. 350 piksel mükemmel simgeler
Uygulamalar veya siteler için 350 350 mükemmel bir simge seti. Aynı zamanda, kalite kaybı olmadan boyut olarak değiştirilebilirler.
08. 80 mini simgeler
80 Hem PSD formatında hem de ikonik bir font olarak indirebilecek minyatür simgeleri mükemmel şekilde temizle. Bu düzenli ve sofistike sosyal PSD simgeleri, her türlü projeler için idealdir.
09. Basit ve pratik web simge vektör grafiği
Kişisel ve ticari projelerde kullanılabilecek birçok yararlı simge.
10. Ücretsiz düz simgeler
Bir takvim, e-posta, saat, kartlar ve daha fazlasını seçebileceğiniz düz bir tarzda yapılan simgeler kümesi.
11. Mono Simgeler
Minimalizm tarzında yapılan 108 benzersiz tek renkli simgesini içeren bir set. Hepsi PNG formatında 32 ila 32 boyutunda mevcuttur.
12. Metrize simgeleri
Kendi uygulamalarınızda ve web projelerinizde kullanılabilecek ücretsiz metro tarzı koleksiyonu. Sosyal ağların 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 içerir.
13. Tab Bar Simgeleri IOS 7
Kendi uygulamalarınızda kullanabileceğiniz IOS 7'den ilham altında tasarlanan zarif bir simge kümesi. Simgeleri aşağıdaki formatlarda indirebilirsiniz: PSD, AI ve ESP.
14. Tıknaz Pika Icon Set
Danimarka'dan Hollandalı simgesi ajansı tarafından oluşturulan Pika tarzı simgeler. Bu kit 42 mükemmel şekilde net bir simge içerir.
15. İkonik
Minimalist tasarımlar için ideal olan basit fakat çekici simge kümesi. İkonik, PNG, SVG, SWC ve diğer formatlarda indirilebilecek açık bir kaynak setidir, bu da kendi tasarımlarınıza uyarlamanıza izin verir.
16. 44 ücretsiz simgelerin tonları
44 simge kümesi. Onları kendi projelerine kolayca düzenleyecek ve uyarlayacak olan forum için PSD simgeleri içerir.
17. Token Icon Set
Token, ICO formatında 16 ila 16 piksel, 32 piksel ve 256 piksel ve 128 piksel miktarında PNG formatında mevcut olan 128 benzersiz simge içerir. Her simge karanlık ve ışık versiyonlarında gösterilir ve PSD dosyası ile tamamlanır.
18. Düz Simgeler (PSD)
PSD formatında indirilebilecek ve kendi ihtiyaçlarınızda düzenlenebilecek düz stilli rengarenk simgeler.
19. Ücretsiz 32PX Icons Set
Herhangi bir varış yerinin PSD simgesini bulacağınız bir set: Skype, Facebook, Twitter, RSS, bir fincan kahve, "Gibi" ve çok daha fazlası.
20. 48 Düz Tasarımcı Simgeleri
Minimalizm hayranı iseniz, o zaman bu set tam olarak beğeneceksiniz. Office görevlerini, sosyal yönleri yanı sıra seyahatin yanı sıra 48 ücretsiz simgeden oluşur. Hepsi AI ve PNG formatlarında sunulur ve kalite kaybı olmadan ölçeklendirilebilirler.
21. Plex Icons Set
Kit, hangi takvimler, antivirüs, saat, aralarında 100'den fazla simgeyi içerir. e-posta, Uygulamalar Microsoft Office. , sosyal ağlar, ayrıca çok daha fazlası.
22. Vektör mini ücretsiz
ICOJAM komutu tarafından geliştirilen 1000 psd'den fazla simge kümesi. Hepsi de PNG formatında. Hem kişisel hem de ticari projelerde ücretsiz olarak kullanılabilecekleri için yeni bir site geliştirmede kullanım için idealdirler.
23. Eldorado Mini Ücretsiz
ICOJAM'dan sonraki mini simgelerin bir sonraki koleksiyonu, içinde 40 piksel başına 40'lık miktarda 1200 simge sunulmuştur.
Bu kaynaklar hakkında bulabileceğiniz simgeler, slayt gösterisinde bilgiyi göstermek için de kullanılabilir, süsleyin kartvizitler, Menü, el ilanları ve diğer.
Bu sitelerdeki simgelerin ücretsiz olduğuna, ancak yine de, halen herhangi bir zamanda değişebilecekleri zaman zaman koşullarına dikkat edin.
01. Smashing dergisi
22. Pixelsmarket.
26. Blugraphic
Blugraphic - Seçenekler PSD, PNG ve Vector Icons. Arama etiketleri ile sınırlıdır, ancak bültene abone olabilir ve haftalık olarak alabilirsiniz. Ücretsiz seçim e-mail ile.
27. Simge şoku.
Simge şoku kişisel kullanım için binlerce ücretsiz simgedir. Ticari bir projeye bir resim uygulamak için, bir kerelik ödeme yapmanız gerekir.
28. CSS Yazar
CSS Yazar, en iyi ücretsiz web simgelerinin haftalık seçimler sunar.
29. Yaratıcı kuyruk
Taze simgeler ister misiniz? Yaratıcı kuyrukta artık hiçbir yerde bulunmayan setleri var.
30. All-bedava indir
All-Free-Download, hafif bir arama ve doğrudan indirmeler PSD, PNG ve Vectors sunar.
31. EGO Simgeleri
EGO Simgeleri, 1.500'den fazla premium simgeler ve 100 ücretsiz vektör simge sunar. Üst navigasyon paneli düğmelerine tıklayarak bağlı ortaklıkları da ziyaret edin.
32. Alienvalley
Alienvalley'de, e-posta adresiniz karşılığında çok çeşitli yüksek kaliteli simgeler yelpazesi.
33. Dreamstale
Dreamstale, yazarlığın talimatlarına tabi mükemmel ücretsiz bir prim simgeleri sunacak.
34. DuckFiles.
35. 1001 ücretsiz indirme
1001 ücretsiz indirme, birçok mükemmel ve tuhaf seçenek tarafından temsil edilen düz simgeler konusunda uzmanlaşmıştır.
36. GraphicsBay.
37. Pixeden.
Pixeden'de birkaç boyutta simgeleri arayabilirsiniz. Burada PNG formatında 16x16 ila 512x512 arasında geniş bir seçimdir.
38. nounproject.
Nounproject kullanışlı bir arama, kolay yükleme ve yüksek kalite Simgeler. Yazarın referansı zorunludur. Aylık katkı olan üyelik indirme kısıtlamalarını rahatlatır.
39. IconMonstr.
IconMonstr, yazarın bir göstergesi olmadan birkaç boyutta simgeler sunar.
40. Fusionplate.
Uyarlanabilir Tasarım - popüler Konu. Ekranlar uzun zamandır standart izinlerin dışında kalmış ve siteler ayrıca Cihaza avuç içi ve büyük monitörlerin boyutuyla da bakabilirler. Site, cihazın boyutundan ve piksellerin yoğunluğundan bağımsız olarak eşit derecede iyi görünmelidir. Tasarım ve içeriğin uyarlanması için birçok farklı teknik ve teknoloji vardır. Vektör grafikleri, SVG, bence, bu yöndeki en ilginç konulardan biri.
SVG Graphics, simgeler için kullanımı uygundur, retina ile cihazlarda sabun bulunmazlar ve kalite kaybı olmadan gerilebilir.
Burada, örneğin, 4 farklı boyutta bir SVG-sprite, kaynak - 32PX:
SVG bu görevle mükemmel bir şekilde başa çıkıyor ve uyarlanabilir düzenlerde kullanım için çok uygundur.
Tasarım için simgeler bitmiş setlerden alınabilir veya kendinize aittir.
Bitmiş simgeler kümeleri
iconmelon.com.
Farklı konularda simgelerin büyük koleksiyonu. Yüklenen simgeler Kullanımı kullanarak HTML'ye eklenmeye davet edilir.
iCOMOON.IO.
Güzel araç. Yalnızca hazır simgeleri seçip indirebilirsiniz, ancak kendinizi indirebilir ve bunları bir yazı tipi ve / veya sprite biçiminde indirebilirsiniz. Sprite ile birlikte, PNG versiyonunu yüklemek önerilmektedir.
floticon.com.
Büyük koleksiyon, simgeler uygun bir şekilde kategorilere ayrılmıştır. Seçilen simgeler ayrı formatlarda (yazı tipi, svg, png) veya bir kerede indirilebilir.
Kendini Çiz
Bir vektör editöre ihtiyacınız olan simgelerinizi oluşturmak için:
- Adobe Illustrator - bence en iyisi. 599 RUB. / Aylık Creative Cloud aboneliğinin bir parçası olarak;
- Inkscape - ücretsiz ve çok rahat değil;
- Kroki - Mac OS için, 79.99 $. Strokların Vectorization ile bazı sorunlar var, ancak genellikle oldukça rahat.
Kilo kaybı
Bitmiş SVG dosyası genellikle çok gereksiz, ancak iyi optimize edilmiştir. Gereksiz özellikler, boşluklar ve transferler koddan çıkarılır ve puandan sonraki karakter sayısı sayılarla azalır. Dosyanın ağırlığı% 30-50 oranında azalır. Optimizasyon Araçları:
grunt-Svgmin. - GRUNT KULLANIM İÇİN GÖREV svgo.. Aynı zamanda, dosyaların kendileri kaynak klasöründen alır, sonuçları ile klasöre optimize edin ve katlayacaktır. Çok rahat.
Sprit veya Iconcript?
Yazı tipi sprite için uygun bir alternatiftir. Bir ızgara ve simgelerin düzenlenmesi ile uğraşmak gerekli değildir, bunun için ek araçlar gerekli olmasına rağmen, yeni karakterler eklemek için uygundur.
Yazı tipinin yardımı ile sadece bir foton simgeleri değil, aynı zamanda çok renkli yapabilirsiniz.
Bu yazı tipi, örneğin, ICOMOON.IO/APP/ web sitesinde yapılabilir. Yaklaşık eylem dizisi:
- Çevirmeden ve / veya kendi indirin.
- Aşağıdaki Yazı Tipi düğmesini tıklayın.
- Bu adımda, karakterleri simgeler için yeniden atayabilirsiniz veya hemen ortaya çıkan yazı tipini indirebilirsiniz.
Yazı tipi ile birlikte dört formatta (.woff, .svg, .tf, .eot) CSS ve bir demo dosyasıyla yüklenir.
Gömülü yazı tipleri 8. IE'de bile çalışır, ancak aynı zamanda bazı modern tarayıcılarda destekle beklenmeyen sorunlar var. Opera Mini Özel Yazı Tiplerini desteklemiyor, Firefox Yazı tipinin yalan söylediği bir sunucu için büyü gerektiriyor (Base64 kullanarak çözüldü), krom sekmeyi açık bıraktıysanız, Yazı Tipi'ni kaldırabilir:
ayrıca, Windows7'de Chrome'da, gömülü yazı tiplerine sahip sayfa açılırken donabilir ve simgeler yerine diğer bazı tarayıcılarda bir şey olabilir:
SVG sprite ile Chris Coir simgesi sisteminin eşyası. Bir şekilde hiyeroglifleri aynı yerde gördüm, ama şimdi SVG var, bu yüzden ekranda çalışmayacak. CSS-püf noktaları, bu arada, çok aktif olarak yeni tasarımında SVG'yi kullanır ve yeni tasarım editördeki Codepen geliştiricileri, SVG lehine simge fontlarının kullanımını terk etti.
Kullanım kolaylığına rağmen, yazı tiplerini destekleme sorunları şu an SVG'deki simgelerin lehine bir seçim yapmak zorunda kaldı.
Gelecekte, gömülü yazı tiplerinin daha iyi destekleneceğini ummak istiyorum.
Sayfa başına SVG eklemenin yolları var mı?
Sprite
.icon (arka plan-resim: URL (YOU.SVG);)Artıları:
- kısa okunabilir kod;
- resim önbelleğe alındı;
Eksi:
- sunucuya istek;
- eski operatörlerde, arka plan SVG'nin garip desteklenmesidir: SVG arka planı olan bir elemana bir çerçeve eklerken sorunlar ortaya çıkabilir ve yalnızca arka planlar Opera Mini'de görünüm kutusu olmadan çalışır;
- spreydeki simgeler sayfa stilleri için mevcut değildir;
- büyük sprite performans sorunlarına neden olabilir.
BASE64 veri uri
.icon (arka plan-resim: URL (veri: görüntü / SVG + XML; Base64, phn2zyb4bwxucz0iahr0cdovl ...);)Artıları:
- sunucuya istek yok.
- İyi destek Tarayıcılar: Presto ve eski Opera dışındaki her şey.
Eksi:
- resim önbelleğe alınmamış ve her seferinde yeniden görüntülenir;
- cSS'de uzun çizgi;
- okunamadı: Kodda, içerdiği açık değildir;
- kodlanmış resim daha fazla kaynak ağırlığındadır;
- kodlama / kodu çözüldüğü için, ek araçlara ihtiyaç vardır;
- simgeler sayfa stilleri için mevcut değildir.