Daha İyi Grafikler için 20 Faydalı SVG Araçları

SVG bugünlerde web tasarımında popülerlik kazanıyor ve SVG grafikleri oluşturmak için Illustrator veya Inkscape gibi araçları kullanabilirsiniz. Ancak web tasarımı söz konusu olduğunda, daha hafif sonuçlar için her zaman optimizasyon yapmalıyız..

İşte SVG ile hızlı ve verimli çalışmak için kullanabileceğiniz 20 araç. Optimizasyonda, dönüştürmede, kalıp yapımında ve daha pek çok konuda yardımcı olabilecek çoğunlukla çevrimiçi araçlarımız var..

İnteraktif SVG Koordinat Sistemi

SVG ile çalışırken koordinatından çıkamazsınız. Bu size yardımcı olmak için Sara Souiden'ın harika bir etkileşimli aracıdır. SVG koordinatlarının nasıl çalıştığını öğrenin. Kullanmak ViewBox ve en boy oranını korumak SVG'de, turuncu ve mor çizgilerle yönlendirilen ve kullanışlı bir cetvelde SVG koordinatlarının nasıl çalıştığını öğrenirken oynayabilirsiniz.

B64

B64 basit bir araçtır görüntüleri optimize edin, ardından onları base64 formatına çevirin. SVG resimlerinizi bırakabilirsiniz (JPG ve PNG gibi diğer biçimler de işe yarar), ardından sonuç olarak base64 arka plan görüntüsü olan CSS'yi yakalayabilirsiniz..

SVGO

Dışa aktarılan SVG içerebilir gereksiz bilgi Render sonucu etkilenmeden çıkarılabilir. Eğer istersen editör meta verilerini, yorumları veya gizli öğeleri kaldır, SVGO kullanabilirsiniz.

SVGO'yu npm yoluyla ekleyebilirsiniz, $ [sudo] npm kurulum -g svgo veya SVG optimizasyonunuzu işlemden geçirmek için sürükle ve bırak özelliğine sahip GUI sürümünü kullanın..

SVG OMG

SVG OMG komut satırını döndürür SVGO (önceki araç) bir GUI sürümü daha sezgisel ve kullanımı kolay. Sadece düğmeleri değiştirmek Her özelliği etkinleştirmek veya devre dışı bırakmak için Sonunda sonucu görüntü dosyaları ve kod olarak alabilirsiniz..

Şimdi SVG

Illustrator'da çalışırken, dışa aktarılan SVG gerekli olmayan bazı bilgiler içerir. Bu araçla yapacaksın dışa aktarılan SVG'nizin optimize edilmiş versiyonunu edinin Illustrator çalışma alanınızdan. Bu araç, SVG'yi optimize etmek için bazı seçeneklere sahip bir panel ekler. SVG'yi şimdi Creative Cloud Eklentileri sayfasından alabilirsiniz..

PNG dönüştürücü SVG

İstemek SVG dosyalarını PNG formuna aktar? Illustrator gibi uygulamaları açmadan mı? PNG formatında görüntü çıktıları elde etmek için bu SVG'den PNG'ye Dönüştürücü aracını ve ayrıca gerekirse PNG Base64 veri URI'sini kullanın.

SVG Sirki

Yükleyici animasyonlarının harika olduğunu düşünüyorsanız, şimdi SVG'yi kullanarak kolayca oluşturabilirsiniz. SVG Sirki. Araçlar yapmanızı sağlar loop'lu animasyonu kullanarak kendi yükleyicinizi, eğiricinizi veya benzeri bir şeyi yapın. Panelden 'Aktör', konum, boyut, renk ve diğerlerini ayarlayın, ardından sonuçları almak için dışa aktarın.

SVG Sprite

SVG Sprite, optimize eden bir Node.js modülüdür. SVG dosyalarının bir demet, ve onları SVG sprite tiplerine dönüştürür arka plan ve / veya ön plan görüntüleri, SVG yığınları ve daha fazlası için geleneksel CSS sprite'lar dahil.

yarı

Quasi ile yapabilirsiniz Quasicrystal görüntüler üretmek aşağıda gördüğünüz gibi. Bu jeneratör deneysel, ancak sonuçlar kesinlikle harika. Seçenekler değerini değiştirerek oynayabilir, ardından sonuçları 'SVG Kaydet' düğmesiyle indirebilirsiniz..

Düz Desen

SVG ile desen oluşturma hiç bu kadar kolay ve eğlenceli olmamıştı. Resminizi yükleyin, aralığı küçültün veya değiştirin, güzel bir desen elde edene kadar döndürün ve yeniden renklendirin. İndirmeden önce sonucu önizleyebilirsiniz.

Trianglify Jeneratör

Güzel SVG geometrik desenler oluşturun ile Trianglify Jeneratör. Renk rastgeleliği / varyantını, tanecik boyutunu, ayarlayabilirsiniz ve çalışmak için bir renk paleti seçebilirsiniz. Bu araç Trianglify'nin bir GUI sürümüdür.

SVG Gradyanı

CSS ile degradeler yapabileceğinizi biliyorsunuz, ancak SVG ile de aynı şeyi yapabileceğinizi biliyor muydunuz? En kolay yol SVG degrade oluşturmak Bu aracı kullanarak. Sadece start ve stop rengini girin, ardından oluşturulan sonucun kodunu elde edin. CSS'deki bir geri dönüş de dahil edildi.

PSD'yi SVG'ye aktar

Photoshop'u işiniz için görüntü düzenleyici olarak kullanıyorsanız, bazen Photoshop çalışma alanındaki tasarımınızı SVG'ye dönüştürün, Photoshop'ta desteklenmeyen bir formattır. Komut Dosyasını bu araca indirin, sonra Adobe Photoshop / hazır ayarlar / komut dosyaları Klasör.

SVG uzantılı bir vektör katman adını yeniden adlandırın (örneğin, layer1 haline layer1.svg), ve şimdi komut dosyasını Dosya> Scriptler> PS'den SVG'ye.

SVG Filtreleri

SVG ile görüntüye ton, doygunluk, bulanıklık, doğrusal renk kaplaması ve diğerleri gibi efektler ekleyebileceğinizi biliyor musunuz? İşte bir araç bu etkileri görselleştirir, sonra size bir snippet verir kolaylaştırmak için efekti katıştırmak projene gir.

SVG Morfitesi

SVG Morfitesi size izin veren bir JavaScript kütüphanesidir. SVG simgesini bir şekilden diğerine morph. Hareket hızını, geçiş animasyonlarının süresini ve ayrıca dönüş yönünü ayarlayabilirsiniz..

Klip yolu üreticisi

SVG, Shape ile görüntü klibini tıklamanızı sağlar. Şekil kare veya daire biçimindeyse bu oldukça kolaydır. Ama ne şekil çok noktaya sahipse veya çokgen bir şekilse? Bu Klip Yolu Oluşturucu aracına ihtiyacınız olan yer.

Chartist.js

Chartist.js bir kütüphanedir özelleştirilebilir duyarlı grafikler oluşturun. SMIL kullanılarak da canlandırılabilecek grafikleri görüntülemek için SVG'yi kullanır. Bu kütüphane ile çizgi grafik, pasta grafik, çubuk grafik ve diğer grafik türlerini oluşturabilir ve hatta bunlara animasyon ekleyebilirsiniz..

SVG inme çizgi üreteci

Bu basit bir araçtır kesikli çizgiler oluşturmak SVG kullanan Strok DashArray. Önce listeden bir çizgi türü seçin, ardından genişlik, yükseklik, döndürme veya renk açısından özelleştirin. Daha sonra projenize bu çizgi çizgisini uygulamak için HTML kodunu ve CSS'yi alabilirsiniz..

Yöntem Çizim: Basit bir SVG Düzenleyicisi

Yöntem Beraberlik, web tabanlı bir SVG editörüdür. Tuvalin her iki tarafındaki araçlarla gelen sezgisel arayüz. Çizgiler, şekiller çizebilir, metin girebilir veya yerleşik şekiller kullanabilir, ardından çizilen nesnelerin özelliklerini düzenleyebilirsiniz. Görüntüyü SVG formatında dışa aktarın (ayrıca SVG base64 formatında da gelir) veya doğrudan PNG'ye kaydedin.

Flash'ı animasyonlu SVG'ye dışa aktar

Artık çok popüler olmasa da, bazılarınızın Flash'ı bırakmakta zorlanmaları ihtimali var. Eğer öyleyse, yapabilirsin yeni animasyonlarla uyumlu çalışmasını sağlamak için flash animasyonunuzu SVG'ye dönüştürün. Bu araç Flash uygulamasına bir uzantı oluşturur ve CS5, CS6 ve CC üzerinde çalışabilir.

Şekiller, Bitmapler Sembolleri, Klasik Hareketli Tweetler, Şekilli tweens (diğerleri için tartışmalı bir başarı var) söz konusu olduğunda SVG'ye dışa aktarabilirsiniz..