SVG için Ultimate Guide

Bir web sayfasına bir resim yerleştirebileceğinizi, bu sayfayı herhangi bir boyuta ölçekleyebileceğinizi ve görüntü kalitesini hiçbir zaman kaybetmediğinizi düşünün. Eh, yapabilirsin. Tamamen mümkün, biz yapmamız gereken kadar yapmıyoruz.

JPG dosyaları, GIF'ler ve PNG'ler gibi sabit boyutlara sahip resimlerin Web üzerinde yeri vardır, ancak doğal olarak statik doğası, Web'in gidişatıyla çakışır. Duyarlı, akıcı tasarımlara geçerken, daha fazla rahatsız edici, esas olarak duyarlı olmayan görüntülerle uğraşmak zorunda kalır. Sitenizdeki her resmin birkaç farklı versiyonunu oluşturmak ve sunmak için en iyi uygulama haline geldiğini fark ettiğimde, inancın ötesine geçiyor.

Bunun için iyi, teknik sebeplerin olduğunu anlıyorum. Örneğin, herkesin sonsuz ölçekleme fotoğrafları oluşturması uzun zaman alacaktır. Ancak, fotoğraflar her şeyden ibaret ve görüntülerin tamamı değildir. Vektör grafikleri çok uzun bir yol kat etti. Henüz çok yol kat ediyorlar.

Her web tasarımcısı bir illüstratör değil, çünkü elde etmek daha zor olabilir. Fotoğraflar bol ve iyi stok görüntüleri bulmak kolaydır. Diğer yandan vektör grafikleri genellikle düşük kalitededir veya belki de doğru olanı bulamazsınız. Illustrator işe almak pahalıdır.

Ancak vektör grafikleri için destek çevrimiçi büyüdükçe, kullanımları da artacaktır. Herkesin web sitelerinde nasıl uygulanacağını öğrenmesi ve bunları yaratıcı bir şekilde kullanması zamanı. Web sitelerimiz kadar duyarlı görüntüler geleceğidir.

SVG dosyasıyla tanışın…

SVG nedir ve neden kullanmalısınız?

Pekala, aramızdaki yeniler için SVG, Ölçeklenebilir Vektör Grafikleri anlamına geliyor. SVG dosyaları teoride oldukça basit şeylerdir. Onlar sadece içinde bir sürü XML içeren metin dosyaları. Bir SVG dosyasındaki görsel bilgilerin her bir kısmı, daha sonra tarayıcınız, grafik yazılımınız vb. Tarafından hesaplanan ve işlenen, insan tarafından okunabilir kod tarafından tanımlanır.

Bu, SVG dosyalarının örneğin JPG olarak biçimlendirilmiş bir fotoğraf kadar karmaşık olmasa da, sonsuz derecede daha esnek oldukları anlamına gelir. Bir metin editöründe manuel olarak değiştirilebilirler. JavaScript ve CSS gibi kodlarla değiştirilebilirler. Neredeyse gülünç derecede küçük boyutlarda sıkıştırılabilirler.

Diğer bir deyişle, diğer web teknolojilerinin yanında kullanılmak üzere özel olarak tasarlanmıştır. Bizim için mükemmeller.

90'ların sonunda Macromedia ve Microsoft (ve diğer şirketler) tanıtıldı VML ve sonra Adobe (ve diğer şirketler) sundu PGML W3C'ye web sitelerinde vektör görüntüleri için olası çözümler (ve muhtemelen eski PostScript formatına alternatif olarak). W3C, “Hayır, kendi şeyimizi yapacağız; ama fikirler için teşekkürler! ”Sonuç SVG Çalışma Grubu.

Eylül 2001'de, SVG 1.0 resmi bir W3C tavsiyesi haline geldi ve gerisi tarih. Sırala. Internet Explorer SVG formatını benimsemede geride kaldı, kimseyi şaşırtmadı. O zamandan beri, mobil cihazlara yönelik güncellemeler ve daha fazla açıklama yapıldı.

Şimdi bile SVG Çalışma Grubu, HTML5, CSS ve WOFF yazı tipi formatı gibi şeylerle daha fazla entegrasyon entegrasyonu içerecek olan SVG 2'yi yaratıyor.

Desteği var

Şu anda endişelenmeniz gereken Internet Explorer'ın tek sürümü IE8. Bu kadar. Diğer herkes az çok tam SVG desteğine sahiptir. Evet, “iyi” tarayıcılarda bile zaman zaman hatalarla karşılaşabilirsiniz, ancak yine de buna değer. Etrafında çalışmak sadece problem çözme becerilerinizi keskin tutmaz, aynı zamanda bu teknolojiyi ne kadar çok kullanırsak, o kadar çok tarayıcı geliştirici bunu destekleyecektir.

Çıkış yapmak caniuse.com Neyin işe yarayıp neyin işe yaramadığını daha ayrıntılı bir şekilde analiz etmek için.

Her şey cevap veriyor ... ya da olmalı

İnternet teknolojisi, bildiğimiz statik web sitelerinin ötesine geçti. Görüntülerin yetişmesi, düz ve basit olması zamanı. Bir simge yapmanız gerektiğinde, SVG'yi kullanın. Bir çizimi kullanmanız gerektiğinde, yapabiliyorsanız SVG'ye gidin. Özet ama yine de basit bir web sitesi arkası istiyorsanız, SVG'yi kullanın.

Retina ekran teknolojisinin hayranı değilim, özellikle de sahip olmadığım için. Kıskançlık değil. Şey, sadece kıskançlık değil. Basit gerçek şu ki, Retina ekranları gittikçe daha karmaşık hale gelen görüntülerin sunulmasıydı. Sonsuz ölçeklenebilir SVG, problemi en aza indirmeye yardımcı olabilir.

Ulaşılabilirlik

Görme engelli kullanıcılar genellikle web’e göz gezdirir ve her şeyi biraz büyütürler. Normal görüntüler yakınlaştırıldığında kalite kaybedilir. SVG bunu yapmayacak, bu yüzden görme engelli bir kalite deneyimi sunmak için neden bundan yararlanmıyorsunuz?

Web sitenize gelecek için yardımcı olabilir

Teknoloji her zaman değişiyor. Bugün burada olan şey bir süredir olabilir, ancak SVG büyük olasılıkla bir süre daha etrafta olacak. W3C, global endüstri standartlarını belirlediği sürece, SVG'nin tarayıcıdaki vektör grafikleri için fiili standart olmaya devam edeceği görülmektedir. Şimdi kullan ve web siteleriniz uzun ve uzun bir süre için ayarlanacak.

SVG Eğiticileri ve Nasıl Yapılır

Yani ikna oldun. SVG havalı, geleceği var, öğrenmenin zamanı geldi. Neyse ki herkes için, bu internet. İnsanların saatlerce değerli saatler geçirdiklerini, bunu isteyen herkes için ücretsiz eğitim materyali oluşturduğunu biliyorsunuz. Bu tür şeyler yapan insanlar interneti harika yapan insanlar.

Sonra, tabii ki, gittik ve en iyi olanları bulmak için çeşitli derslere göz gezdirdik. Bize daha sonra teşekkür edebilirsin. Şimdilik, yapılması gerekenler var!

Not: SVG dosyalarının tümünün XML kodu olduğunu unutmayın, bu öğreticilerin çoğu geliştirici odaklı veya yalnızca çok fazla kod içeriyor. Hem temelleri hem de SVG için belirli, yaratıcı kullanımlara odaklanmış eğiticileri ekledik, bu yüzden bu bölümü atlamayın.

• SVG Kullanımı: Chris Coyier, css-tricks.com adresinde yıllarca anlaşılması kolay CSS ve HTML eğitimlerini yazmaktadır. onun SVG üzerinde astar farklı değil Pek çok temel açıklama ve öğreticiye bağlantılar ekleyeceğim, ama başlayacağım yer burası. Bu eğitici, Adobe Illustrator kullanıcıları için temel talimatları içerir.
• SVG ile Nasıl Başlanır? WDD'nin kendi katkısı SVG eğitimine. Şahane fantastik Sara Vieira, grafiklerinizi oluşturmayı, dışa aktarmayı, kodu temizlemeyi, sunum niteliklerini CSS dosyalarına taşımayı ve daha fazlasını kapsar.
• Çözünürlük SVG ile Bağımsızlık: Eğer web ile ilgili ise, Smashing Magazine'in muhtemelen onun hakkında bir makalesi var. Onlar kapsar SVG formatının temelleri her zamanki tarzı ve detaylara dikkat ile.
• Ölçeklendirilebilir Vektör Grafikleri (Makaleler Dizisi): Hongkiat.com, kaliteli web ve grafiklerle ilgili öğrenim için başka bir kaynaktır. Sadece uzun bir makale vermek yerine, yayınladılar bütün bir dizi Thoriq Firdaus tarafından. İngilizce bazen biraz eksik, ancak talimatlar hala net ve anlaşılması kolay.
• Sara Soueidan: CSS ile Şekillendirme ve Animasyonlu Ölçeklenebilir Vektör Grafikleri: Bu bir sunum videosu CSSconf AB 2014'te verildi. Sara Soueidan, web'de SVG'ye stil ve animasyon uygulamak için birkaç ipucu, püf noktası ve hatta birkaç korsanlık sağlıyor. Yarım saat kadar, rahat olsun ve elinizle not almak için bir şeyler saklayın. Tamamen zaman ayırmaya değer.
• Adobe Illustrator CC ile web için SVG'yi dışa aktarma: Adobe Illustrator kullanıcıları Bunu kontrol et. Adobe'nin kendi bloglarından biri ayrıntılı ve ayrıntılı bir şekilde, web için SVG dosyalarını nasıl dışa aktaracağımızla ilgili ayrıntılı talimatlar veriyor. Web için en küçük dosya boyutuna kadar bunları nasıl optimize edeceğinizi öğrenin.
• SVGBasics: Bu tüm site insanlara XML ile sıfırdan SVG grafikleri nasıl oluşturulacağını öğretmeye adamıştır. Bunu, herhangi bir web sitesinin gerçek arka ucuyla veya hatta ön uçlarıyla kimin uğraştığını tavsiye ederim. Kodun nasıl çalıştığını bilmek, problemleri anında çözmenin uzun bir yolunu bulabilir.
• Jakob Jenkov tarafından SVG Eğitimi: Başka bir geliştirici merkezli dersler seti, İşte. Büyük fark? Yazar her bölümün video versiyonlarını içeriyordu. Derslerinizle birlikte hem görsel hem de sesli olarak daha iyi öğrenirseniz, bu başlamak için iyi bir yerdir.
• SVG Animasyonuna Basit Giriş: Başlık her şeyi açıklıyor. David Walsh, nasıl kurulacağını anlatıyor Animasyon için SVG öğeleri, Farklı elemanlar için hangi kütüphanelerin kullanılacağını ve daha fazlasını kullanabilecektir. Tam bir rehber değildir, ancak sizi animasyonu başlatmak için gerekli temel kavramları tanıtacaktır.
• SVG animasyonuna giriş: Bu eğitim SVG nesnelerini canlandırma konusunda tam olarak nasıl hareket edeceğiniz hakkında biraz daha ayrıntıya girer. Bunun üzerine, animasyon yaparken karşılaşabileceğiniz bazı ortak sorunları ele alır, bu yüzden okumaya değer.
• Nasıl Yapılır: Birden çok simgeyi Adobe Illustrator'dan SVG dosyalarına dışa aktarın: Illustrator'da bir dizi SVG simgesi oluşturmak mı istiyorsunuz? Hepsini bir Illustrator dosyasında tutmak mı? Hepsini dışa aktar tek bir tıklamayla ayrı dosyalarına.
• SVG Yolları ile Metin Animasyon: Başlıkta tam olarak yazıyor mu. Animasyonunuzu alın, belki bir logo üzerinde kullanabilirsiniz. Kesinlikle yeterince havalı görünüyor ...
• CSS3 ve JavaScript ile SVG Simgeleri Animate: SVG'nin en büyük kullanımlarından biri simgeler ve iyi bir sebeptir. Bir dosya oluşturun, sitenizdeki veya uygulamanızın herhangi bir yerinde herhangi bir boyutta kullanın. Daha ne isteyebilirsin? Bu eğitim hoverda bu simgeleri nasıl canlandıracağınızı gösterir.
• Ölçeklendirilebilir bir SVG Grafiği Oluşturma: Infographics, günümüzde gerçekleri tüketmenin en gözde yollarından biridir. Neden olmasın Onları sonsuz ölçeklenebilir hale getirmek? Bazı animasyonları atın ve bazı zihinleri çok iyi uçurabilirsiniz.
• Bir SVG HTML Burger Yapma Düğmesi: Hamburger düğmesi hakkında ne yapacağınızı söyleyin, muhtemelen hiçbir yere gitmiyordur. Sen de yapabilirsin SVG ve animasyon kullan Bunu yapabileceğiniz en parlak, en havalı hamburger düğmesi yapmak. Bu, bir düğmeyi kelimenin tam anlamıyla bir diğerine dönüştürebilmek için yolların ve vuruşların nasıl canlandırılacağını kapsar, bu yüzden ona bir göz atın.
• Snap.svg Örnekler ve Öğreticiler: Bu bir rehber Snap.svg JavaScript kütüphanesini kullanmak için (aşağıdaki “Araçlar” bölümüne bakınız) bölüm. JS'de SVG öğeleri oluşturmaya başlamanıza ve onları etkileşimli hale getirmenize, etkileşimli hale getirmenize vb. Yardımcı olmak için tasarlanmıştır.
• Raphaël.js'ye Giriş: Raphaël.js, oradaki büyük SVG ile ilgili JavaScript kitaplıklarından biridir ve Bu makale nasıl kullanılacağını öğretir. (Yine, aşağıdaki Araçlar bölümüne bakın.)
• Animasyonlu SVG Simgesi: İnsanlar animasyonlu ikonları çok seviyor gibi gözüküyor, bu yüzden onları yapabileceğiniz her yaklaşımı öğrenebilirsiniz. İşte Snap.svg kütüphanesini bir kez daha yazar olarak görüyoruz ve bir medya oynatıcısı “oynat” butonunu canlandırıyor.
• CSS ve SVG'de kırpma - Klip yolu Özellik ve Öğe: İşte bir güzel uzun makale resimlerin içinde resim yapmak için SVG kırpmasını ve büyük metin içindeki resimlerin nasıl kullanılacağı hakkında. Arama motoru botları okuyabildiği için SEO dostu olan büyük fantezi başlıkları yapmak için kullanmayı düşünebilirsiniz.
• SVG'leri CSS ile Duyarlı Hale Getirme: SVG dosyaları sonsuz ölçeklenebilir olmasına rağmen, bunları bir web sayfasına yerleştirmek için kullanılan yöntemler bazen sorunlara neden olabilir. Bu eğitim itibaren codrops Karşılaşabileceğiniz çeşitli sorunları nasıl çözeceğinizi açıklar.
• SVG ile Şekil Hover Etkisi: Pürüzsüz ve şık görünümlü oluşturun animasyonlu vurgulu etkisi görüntü önizlemeleri için. ( Demoya bak. )
• W3C tarafından Bugünün Tarayıcılar için bir SVG Primer: Son değil ve kesinlikle en az, biz var sağlanan bir kaynak İlk olarak bütün SVG formatı ile gelen insanlar tarafından: W3C. Temel bir öğretici ya da bir giriş değil. Önsözüne göre, profesyonel programcılar, grafik tasarımcılar için “güçlü bir teknik bükme” ve nitty cesurluğa inmek istemeyen diğer kişiler için yaratıldı.
• MDN tarafından SVG Eğitimi: SVGBasics gibi, bu oldukça kapsamlı dersler seti, Mozilla Geliştirici Ağı tarafından sağlanmıştır. Yine de olduğu gibi, öğreticinin kendisi de “geliştirme aşamasında” olarak kabul edilir. Örneğin, bu durum şu anda boş olan "Filtreler" sayfasında görülebilir. Sayfanın kendisine göre, öğretici gelişimin erken bir aşamasındadır. Eğer yapabiliyorsanız, lütfen paragraf veya iki paragraf yazarak yardım edin. Bütün bir sayfa yazmak için ekstra puan.

SVG Araçları

SVG'nin açık doğasının birçok avantajından biri, herkesin yazılım yapabilmesidir. Kullanmak için yalnızca açık bir standart olan, ödeme yapmak için lisans kısıtlaması veya ücret yoktur. Tahmin edebileceğiniz gibi, birçok geliştirici bunu tam olarak yaptı.

SVG formatını oluşturma ve kullanma araçları bol. SVG'yi daha sonradan bir dışa aktarma seçeneği de içeren büyük yazılım paketlerinden, SVG'yi birincil format olarak kullanan uygulama örneklerini ve daha fazlasını içerir.

“SVG araçları” için hızlı bir Google araması “Yaklaşık 37.000.000 sonuç” döndürüyor. Bu nedenle, orada çok fazla şey olduğunu biliyorsunuz.

O zaman nerede başlasın?

Premium Uygulamalar

Grafik oluşturmadaki büyük isimler SVG'yi destekliyor. Adobe Illustrator,Corel çizgisi, hatta çeşitli ürünler Xara - Evet, Xara hala bir şey - hepsi formattaki dosyaları içe aktarabilir, düzenleyebilir ve kaydedebilir. (Illustrator uygulamasının bazı garip şeyleri SVG dosyalarına koyduğu biliniyordu, bu nedenle dışa aktarma ayarlarına dikkat etmeniz gerekiyor.)

Inkscape

Eğer bir vektör grafik paketi kullanmıyorsanız, Inkscape başlamak için harika bir yer. 2003 yılında Sodipodi (başka bir OSS projesine dayanan) adlı bir başka açık kaynak projesinin çatalı olarak oluşturulan Inkscape, ücretsiz, çapraz platform vektör grafik yazılımı için standart haline gelmiştir. Adobe Illustrator olarak özellik dolu değil, ama çoğu vektör projesi için fazlasıyla yeterli.

Serif DrawPlus Başlangıç ​​Sürümü

Serif oldukça iyi grafik oluşturma ve masaüstü yayıncılık yazılımı yapan bir şirkettir. Tüm ana yazılım teklifleri ücretsiz “Starter Edition” ile gelir ve vektör çizim uygulaması istisna değildir.

“Starter Edition” ın sizi kandırmasına izin vermeyin. Pro sürümünün yaptığı her şeye sahip olmayabilir, ancak çoğu durumda işi halledebilir. Ticaretten bir illüstratör olmadıkça, bu uygulama Windows'ta olmanız koşuluyla ihtiyaçlarınızı karşılayabilir ve karşılayacaktır. Ne yazık ki, çapraz platform değil. Ayrıca, indirme işlemi için kayıt gereklidir.

Karbon

Öncelikle Linux için olan Calligra ofis paketinin bir parçası, Karbon tam özellikli vektör grafik editörüdür. Tüm temel araçları ve yanında birkaç şey var. Mac ve Windows üzerinde kurulum yapmak, imkansız olmasa da zor.

Baskı dizaynı

İsim 90'lı bir yazılım paketi gibi geliyor, biliyorum, ama aslında oldukça yeni. Aslında, durdurulan eski sK1 illüstrasyon uygulamasının ardılı. Baskı dizaynı şu anda "önizleme" aşamasında ve hem Linux hem de Windows sürümleri var. Henüz üretim için kullanıma hazır değil, ama izlemeye değer bir proje.

SVG düzenleme

İsim biraz burun burunda, belki de yazılım yeteneklidir. SVG düzenleme Tamamen web teknolojilerine, özellikle HTML5, JavaScript ve CSS'ye dayanmaktadır. Bu, sunucu tarafı işlevselliğinin olmadığı anlamına gelir. Dahası, Açık Kaynak, yani indirebilir, kendi sunucunuza koyabilir ya da sadece masaüstünden kullanabilirsiniz.

Bir var özellik listesi Bir masaüstü uygulamasını kıskanç hale getirmek için yeterince uzun ve çoğudan daha hızlı çalışır, bu yüzden ona bir girdap verin.

Janvas

Janvas Bu listede kesinlikle ücretsiz olmayan tek web tabanlı uygulama. Otuz günlük bir deneme süresi vardır, bunun ardından abonelik yıllık 26 Euro'dur. Diğer web tabanlı SVG editörlerinden hiçbiri sizi mutlu etmiyorsa, aslında bunu düşünebilirsiniz.

Çizim araçları yeterince gelişmiş ve tanıdıktır, her değişken kenar çubuğunda düzenlenebilir ve belgelerinizi Google Drive'a kaydedebilirsiniz. Şablon oluşturabilir, çizim dokümanları üzerinde işbirliği yapabilir ve hatta grafiklerle etkileşime geçmek için CSS ve JS dosyaları oluşturabilirsiniz.

Sonuç olarak, sağlam bir teklif.

Mondrian

Küçük. Şık. Basit. Mondrian başka bir tane daha açık kaynak sunan ve çoğudan çok daha küçük. Bir metin aracı bile yok… ama basit çizimler çok iyi. Dosyaları sabit sürücüden veya bir URL'den açabilir, web sitenize ait gömme kodunu alabilir veya yalnızca SVG veya PNG olarak çiziminizi kaydedebilirsiniz. Diğer uygulamalar kadar gelişmiş olmayabilir, ancak kullanımı güzel hisseder ve kalem aracı doğal hisseder.

SVG çiz

SVG çiz İhtiyacınız olan tüm özelliklere sahip başka bir web tabanlı SVG editörüdür. En güçlü nokta, onun yüklediği ve çizdiği bir şeydir. Ne yazık ki, kullanıcı arayüzü ciddi şekilde hatalı. Yine de, orada ve ihtiyacınız olursa, işe yarıyor.

SVG Kütüphaneleri

Geliştiriciler sevinirler! Burada senin için bazı bağlantılar var. Sonuçta, SVG sadece başka bir grafik formatı değil. Bu kod. Bağlantılı veya gömülü kod olabilir. Sinek ile etkileşime girebilir ve değiştirilebilir. Matematik ile!

Snap.svg

ani SVG ile oluşturma ve etkileşim için bir JS kütüphanesidir. Modern tarayıcılar için tasarlandı. Evet, bu sadece IE9 + 'yu desteklediği anlamına gelir ... ancak eski tarayıcılar sizin endişeniz değilse, bunun için gidin.

Raphael

Raphael, Snap'in aksine, eski tarayıcılarla uyumludur. Aslında, IE6 +, Safari 3+ ve Chrome 5+ ile çalışabilir. Örneğin, kullanıcıların eski makinelerde olabileceği bir kurumsal sistem için bir şey geliştiriyorsanız, Raphaël sizin en iyi bahsiniz olabilir.

jQuery SVG

SVG ve jQuery gibi mi? Gerçekten şaşırmadım. jQuery, belki de bir zamanlar sahip olduğu spot ışığın bir kısmını yitirdi, ama hala çoğumuz için bir go-to kütüphanesi.

jQuery SVG, o zaman, muhtemelen büyük olasılıkla aradığınız eklentidir. Animasyonlar, grafikler ve hatta uzantılar için fonksiyonlar var. Doğru, eklenti için uzantılar. Tarayıcı desteği IE9 + 'dır, ancak IE'nin eski sürümleri, uygun tarayıcı eklentileri yüklü olarak kullanılabilir.

Yine de bu eklentilere sahip olan kullanıcılara güvenmem.

SVGMagic

SVGMagic eski tarayıcılar için jQuery tabanlı bir çözümdür (IE 7 & 8). Kullandığınız her SVG dosyası için el ile yedek resim oluşturmak yerine, bu eklenti bunları anında oluşturabilir. Arka plan resimlerini de iyi işler.

Bunlardan herhangi birini nasıl yapıyor? Kullanıcının tarayıcısının SVG ile çalışıp çalışmadığını tespit eder. Eğer öyleyse, uyumaya gider. Değilse, sunucu tarafında bir PHP betiğine başvurur ve gerekli boyutlara sahip söz konusu SVG görüntülerinin PNG dosyasını oluşturmasını söyler.

Bir kez bittiğinde, PHP betiği URL'leri bu geçici geri dönüş görüntülerine jQuery eklentisine geri gönderir ve varsayılan URL'ler değiştirilir. Bu açıkça zaman alır, bu yüzden isteğe bağlı olarak dönüşüm gerçekleşirken gösterilecek bir yer tutucu görüntüsü belirtebilirsiniz.

Bir uyarı: Şu anda bir kerede çok fazla görüntü işleyemiyor. Bu tekniği birkaç SVG dosyası içeren sayfalarda kullanmak istemezsiniz.

SVG.JS

Son olarak, bayt sayıcılar için bir seçenek. SVG.JS gziplendiğinde sadece 11.8kbs ağırlığındadır. Küçük boyutuna rağmen, etkileyici sayıda özelliği destekler (projenin sayfasında listelendiği gibi):

• Boyut, pozisyon, dönüşüm, renk üzerine animasyonlar
• Modüler yapı sayesinde ağrısız uzatma
• Çeşitli kullanışlı eklentiler mevcut
• Hareket, boyut, merkez ile şekil türleri arasında birleşik API
• Olayları öğelere bağlama
• Opaklık maskeleri ve kırpma yolları için tam destek
• Metin yolları, hatta animasyonlu
• Eleman grupları ve setleri
• Dinamik degradeler

Okumak belgeleme daha fazla bilgi için.

Stok SVG

Herkes bir illüstratör değil. En azından, hiç bu kadar iyi olmamıştım. Böylece, stok illüstrasyonları paha biçilmez bir kaynak haline gelir. Yine de iyi şeyler bulmak zor olabilir. Microsoft clipart gibi görünmeyen, genellikle kapsam veya sınırlı olarak sınırlıdır.

Yine de umudunu kaybetme. Orada kaliteli bir sürü şey var. İhtiyaçlarınızı tam olarak karşılamıyorsa, vektör sanattır. Şanslar, vektör grafik yazılımı hakkında temel bilgiye sahipseniz, ihtiyaçlarınızı karşılamak için ayarlanabilmesidir.

SVG, hisse senedi resimlerinden daha fazlasını yapabilir. Ayrıca, bant genişliği kadar yemeyen, büyük fantezi arka planları ve daha fazlasını da oluşturabilirsiniz. İnsanların bizim için ne yaptığına bir bakalım:

Openclipart.com üzerinde SVG Clipart

SVG, açık format olarak, hayran olarak birçok açık kaynak meraklısına sahiptir. Sonuç olarak, ne olabileceği konusunda kullanılan birincil formatlardan biridir. ücretsiz küçük resim en büyük koleksiyonu dışarıda.

Ve bir çoğu da clipart-ish. Ve bir sürü amatör işi. Görüyorsanız, bazı kaliteli grafikler var. Hey, bedava.

SVG Hisse Senedi

SVG Hisse Senedi nispeten küçük ama mükemmel bir koleksiyon ile küçük bir sitedir. Çoğunlukla simgeler ve cihaz maketleri, ama hepsi yüksek kalitede. Bu iki şeyden birine ihtiyacınız varsa, buradan başlayın.

Deviantart.com'daki SVG kaynakları

Ah Deviantart, Bu dev topluluk hala güçlü oluyor. Stok görüntüleri kategorisine gidin ve SVG'yi arayın (veya yukarıdaki bağlantıya tıklayın). Yine, kalite değişecektir, ancak bakmak için zamanınız varsa iyi şeyler var.

SVG Kalıpları Galerisi

Dolu küçük bir galeri SVG tabanlı desenler. Bir gösteri vakası olarak tasarlandı, ancak kaynak dosyaları rahatınız için var.

Svgeneration.com'dan SVG Kalıpları

svgeneration.com kullanımınız için bir çok SVG modeli içerir. Site, her bir desen için düzenleme seçenekleriyle birlikte gelir ve değişikliklerinizi eylemde görmek için kodu doğrudan sitede düzenleyebilirsiniz. Bu sadece önceden yapılmış desenler için harika bir kaynak değil, ilk etapta nasıl yapıldığına dair çok şey öğrenebilirsiniz.

SVG Clipart

Sanat üzerinde bu site belirgin eski moda karikatür tarzıdır. Açıkçası, herkesin aradığı şey olmayacak, ama klasik hisleri resimlerine isteyenler için orada.

SVG Studio

SVG Studio farklı bir modern duygu ile binlerce illüstrasyon sunuyor. Bunları küçük alt kümeler halinde satın alabilir veya tüm kataloglarını bir kerede indirebilirsiniz. Bu size 3000 USD için o kadar da kötü bir anlaşma olmayan 500 USD geri getirecek.

Daha büyük stok sitelerinde SVG

Her sitede sunulan sanat hakkında çok fazla şey söyleyemem, çünkü genel stil içermeyen katılımcı tarafından geniş çapta değişiyor. En büyük isimler istockphoto.com,shutterstock.com,bigstockphoto.com, ve canstockphoto.com.

SVG İlham

İstediğimiz tüm tanıtımları okuyabiliyoruz ve oradaki tüm eğiticileri takip edebiliyoruz. SVG spesifikasyonunun her alanında uzman olabiliriz, ancak yine de bu konuda çok sıkıcı olabiliriz. Herhangi bir teknolojideki potansiyeli en iyi şekilde değerlendirmek zorundayız.

Bununla birlikte, genellikle daha kolay söylenir. Sık sık bir referans noktasına, bakılacak harika bir şeye sahip olmamıza ve sahip olduğumuz şeyle ne tür harika şeyler yapabileceğimizi göstermemize yardımcı olur. Siteler böyle Webcreme genel olarak web tasarımı için yaptı. İşte bu CSS Zen Bahçesi, ve ardından gelen tüm CSS galerileri, CSS düzenleri için yaptı.

Henüz, diğer web teknolojileriyle birleştirilen SVG ile nelerin başarılabileceğine adanmış herhangi bir galeri sitesi bulamadım ve bu da işe yarayabilir. Bu arada, bulduğumuz harika şeylerden oluşan bir vitrin:

Görüntülü Reklam Reklamı

Bu örnek parçasıdır Snap.svg CodePen üzerinde koleksiyon. SVG'nin çevrimiçi reklamlarda devrim yapmak için nasıl kullanılabileceğinin mükemmel bir örneğine mi ihtiyacınız var? Budur.

Bir düşünün: Bazı reklam şirketleri hala piksel boyutuna göre reklam satıyor. Bu, ekran boyutlarındaki sonsuz varyasyon çağında ve Retina ekranlarının önyükleme yapmasında bir anlam ifade etmiyor. Görsel reklamlardan daha iyi bir sistemle karşılaşıncaya kadar, SVG en azından reklamların web tasarımının duyarlı doğasına uygun hale getirmemize yardımcı olabilir.

Kalemi görmek Görüntülü Reklam Reklamı Hazırlayan: CJ Gammon ( @cjgammon ) CodePen .

Jtop masaüstü arayüzü

Genel olarak web teknolojilerini araştırırken devam ettiğim bir varlık olan Mozilla Geliştirici Ağı da SVG ile yapılmış ilginç şeyler üretti. Mesela gitti ve gitti tüm bir masaüstü arayüzü HTML5, JS, SVG ve CSS gibi web teknolojilerine dayalı. Hızlı, özelleştirilebilir ve neredeyse gerçek bir işletim sisteminin parçası olsaydı.

Yansıma Zamanı

Bize tarafından getirildi ShinyDemos (Bu da sırayla insanlar tarafından bize getirilmiştir Opera ) Yansıma Zamanı tam anlamıyla web kameranızdan canlı yayın üzerinden bir saat kaplar. Eh, izin verirseniz, ve aslında bir kameranız var. Ama önemli olan nokta, SVG maskelerinin neredeyse her şeye yerleştirilebileceğini gösteriyor.

oblurlay

CSS, SVG ve jQuery bir arada, oblurlay adının tam olarak önerdiği şeyleri oluşturur: bulanık bir yer paylaşımı, iOS stili. Bu bir jQuery eklentisidir, bu yüzden uygulama zor değildir ve SVG filtrelerinin sadece SVG nesneleri değil, her tür şeye nasıl uygulanabileceğini gösterir.

Codrops demoları

Codroplar (öğreticiler bölümünde daha önce bahsedilmiştir), SVG'nin neler yapabileceğini göstermek için oldukça etkileyici, etkileyici ve sadece oldukça güzel demolar üretmiştir. Her biri bu makalede kendi uygun bölümlerini hak ediyor, ama hepsini bir araya getirdiğim çok şey var. Bu “İlham” bölümünden başka bir şeye bakmazsanız, bunlara bakın. Demolara göz atın ve kaynak dosyaları indirin. Öyleyse Codrops'daki adamlara teşekkür et. Onlar bunu hak ediyorlar.

Not: Bunların hepsi SVG odaklı değildir, ancak hepsi bir şekilde SVG grafiklerini kullanır.

Sayfa Yükleme Efektleri : Snap.svg ile SVG animasyonlarını kullanan bir dizi yaratıcı sayfa yükleme efekti. Buradaki fikir, yeni içerik yüklenirken ilginç bir şekil animasyonu içeren bir yer paylaşımı göstermek.

İnce Vurgulu Etkileri için Fikirler : 3D çeviri ve sahte öğeler dahil olmak üzere modern CSS teknikleri kullanarak bazı yaratıcı ve ince vurgulu etkisi ilham. Ayrıca SVG kullanıyorlar. Git göz atın gösteri ikinci etki grubu için.

SVG Çizim Animasyonu : Grafiklerin veya web sitesi öğelerinin görünümünü önceden oluşturmak için SVG çizgi çizme animasyonlarının kullanımını araştıran küçük bir deneme.

Off-Canvas Menüsü Etkileri : CSS geçişleri ve SVG yolu animasyonlarını kullanarak tuval dışı menü efektleri ve stilleri için bazı ilham kaynakları.

Araç İpucu Stilleri İlham : ilham için çeşitli vurgulu araç ipucu stilleri ve efektleri küçük bir koleksiyon. CSS dönüşümleri, sınır-yarıçapı ve SVG şekillerini kullanarak modern görünümlü ve ilginç araç ipuçları oluşturabiliriz.

Bildirim Stilleri İlham : göze batmayan web sitesi bildirimleri için bazı basit fikirler ve efektler. Bazı stilleri sergilemek için küçük bir betik kullanılır ve efektler için CSS animasyonları kullanılır.

Özel Seçim Öğeleri için ilham : Seçme öğesinin özel bir sürümünü şekillendirmek için biraz ilham. Birçok olasılık var ve bugün, kullanıcının stilde bir seçim yapmasına izin vermek için bazı fikirler araştırıyoruz.

Inline Anchor Styles için ilham kaynağı : Sahte eleman geçişleri ve SVG'ler gibi farklı teknikleri kullanarak yaratıcı ve modern satır içi çapa stilleri ve vurgulu efektleri için bazı ilham kaynakları.

Ok Gezinme Stilleri : oklar için SVG simgeleri ve efektler için CSS geçişleri ve animasyonları kullanarak ok gezinme stilleri ve vurgulu efektleri için bazı ilham kaynakları.

Wobbly Slayt Gösterisi Etkisi : Bu slayt gösterisindeki slaytlar hareket ettikçe titriyor. Efekt, Sergey Valiukh'un Dribbble atışına dayanıyor ve Snap.svg ve morphing SVG yolları kullanılarak yapıldı… Lütfen bunun çok deneysel olduğunu ve sadece modern tarayıcıların en son sürümlerinde test edildiğini unutmayın.

Sarmalamak

SVG, henüz en yaygın kullanılan görüntü formatlarından biri olmasa da, iyi belgelenmiş, güçlü bir şekilde destekleniyor ve Internet'in geleceğinin büyük bir parçası. Henüz tasarım sürecinizin bir parçası olarak kullanmıyorsanız, muhtemelen başlangıç ​​zamanıdır.

Özellikli resim, kesintisiz vektör görüntü Shutterstock üzerinden.

• ← Şubat 2015 için 10 Ücretsiz WordPress Eklentisi
• Ekip Çalışmanızı Düzenleyen 21 İşbirliği Araçları →