Herhangi bir web sayfasını tasarlamak için, hem statik grafikler hem de çeşitli animasyon ve etkileşimli öğeler gereklidir; bu, ilk olarak, üzerinde sunulan bilgileri daha çekici hale getirir ve ikinci olarak, malzemenin daha iyi algılanmasına katkıda bulunur.
Grafik bilgisi metin bilgisinden çok daha yavaş iletilir ve görüntülerin yüklenme süresi grafik dosyalarının boyutuyla doğru orantılıdır, bu nedenle web sayfalarının hızlı yüklenmesi, küçük boyutlu gömülü grafik görüntüleri anlamına gelir. İkincisi, formatın optimal seçimi ile elde edilir grafik dosyası, görevi, sayfa yükleme hızı ile üzerinde sunulan görüntülerin kalitesi arasında bir uzlaşma bulmak olan optimizasyon yoluyla. Bununla birlikte, optimizasyon olanakları sınırsız değildir ve kural olarak yüksek kaliteli görüntüler etkileyici bir hacme sahiptir, bunun sonucunda başarı Yüksek kalite Web'de sunulan resimler, küçük boyutlarına rağmen hala ciddi bir sorundur.
Ancak soru sadece boyut ve kalitede değil - bir web sayfası için bir tasarımın geliştirilmesi, tasarımcının çok çeşitli teknolojileri ve yazılım ürünlerini bilmesini gerektiren bir konu olduğu ortaya çıkıyor, çünkü farklı grafik bilgi türleri için bir oluşturulması için çeşitli dosya biçimleri ve farklı teknolojiler kullanmak zorundadır. Statik grafikler için, çok çeşitli grafik paketlerinde oluşturulabilen GIF, JPG veya PNG formatları kullanılır. Animasyon nesneleri için animasyon GIF ve Flash biçimleri kullanılır ve bu tür nesneler özel olarak geliştirilir. yazılım uygulamaları(adlandırılmış biçim türlerinin her birine özel). Etkileşimli öğeler (rollover'lar, ImageMaps, vb.), Kural olarak, özel uygulamalarda da oluşturulur ve aralarında HTML koduyla tamamlayıcı bir dosyada kurulan bir dizi grafik görüntüyü temsil eder.
Bu sorunlara başarılı bir çözüm, grafiksel bir uygulamaya geçiş olabilir. SVG formatı(Ölçeklenebilir Vektör Grafikleri), herhangi bir SVG görüntüsünün bir küme olarak temsil edilebilmesi için XML tabanlı komut satırları(Şekil 1) ve SVG dosyasının kendisi, not defteri de dahil olmak üzere herhangi bir metin düzenleyicide açılabilir. Bu nispeten yeni teknoloji, orijinal olarak Adobe tarafından özellikle web için geliştirilmiştir ve bugün büyük ilgi görmektedir. mobil cihazlar, yüksek kaliteli statik, hareketli ve etkileşimli grafiklerin oluşturulmasını sağlar. Bu nedenle, W3C konsorsiyumu tarafından aktif olarak desteklenmesi şaşırtıcı değildir (http://www.w3.org/Graphics/SVG) - 2003 yılında SVG 1.1 standardı W3C tarafından bir tavsiye olarak kabul edilmiştir ve şu an SVG 1.2 spesifikasyonu geliştirme aşamasındadır (http://www.w3.org/TR/SVG12/).
karşılık gelen görüntü ile
SVG teknolojisi, metin, grafik, animasyon ve etkileşimli bileşenleri tek bir biçimde birleştirmenize olanak tanır ve üç tür grafik görüntüye dayanır: vektör şekilleri, resimler ve metin. Vektör grafiklerinde alışılageldiği gibi şekiller, ya düz ve eğri konturlarla ya da grafik ilkellerle (dikdörtgenler, elipsler, vb.) temsil edilir ve resimler içe aktarılan bitmaplerdir. Ayrıca, SVG formatı çeşitli animasyon türlerini (GIF ve flash animasyona benzeyen) ve rollover'lar, bağlantı haritaları ve diğer gezinme öğeleri gibi etkileşimli nesneleri destekler. Dan beri bu standart XML tabanlıdır, SVG dosyası, görsel görüntülemeye yönelik öğelerle birlikte çeşitli meta veriler de içerebilir.
SVG formatını kullanmanın artıları ve eksileri
SVG biçimini kullanmak, Web ve mobil cihazlar için başka hiçbir grafik biçiminin sağlayamayacağı daha kompakt, hızlı yükleme, yüksek kaliteli, çok yönlü grafikler geliştirmenize olanak tanır. SVG grafik formatının başlıca avantajları aşağıdakileri içerir:
- SVG formatının vektör yapısı nedeniyle boyutları ne olursa olsun yüksek kaliteli görüntüler. Görüntüler, ekranın boyutuna göre kalite kaybı olmaksızın süresiz olarak küçültülebilir veya büyütülebilir (Şekil 2), bu da çeşitli cihazlarda (masaüstü bilgisayarlar, cep bilgisayarları, vb.) grafik bilgilerinin yüksek kaliteli bir görüntüsünü elde etmenizi sağlar. .) ve ayrıca bireysel ayrıntıları daha dikkatli incelemeyi mümkün kılar - bu, örneğin teknik çizimlerle çalışırken önemlidir;
- GIF, JPG, PNG ve animasyonlu GIF biçimlerine kıyasla çok daha küçük dosya boyutları ve Flash'a göre çok daha fazlası. Örneğin, LZW sıkıştırma modunda sıkıştırılmış bir makale için test edilen bir GIF dosyası 26 KB ise, karşılık gelen SVG dosyasının boyutu 1220 bayttı ve SVGZ formatında sıkıştırıldığında yalnızca 685 bayttı.
Ama sadece bu değil. Web'in grafiksel gösterimi için geleneksel seçeneklerle karşılaştırıldığında, SVG formatının kullanımının tartışılmaz başka birçok avantajı vardır.
Bu nedenle, geliştiriciler için önemli avantajlar şunlardır:
- tek bir geliştirme biçiminde statik, animasyon ve etkileşimli öğelerin yanı sıra vektör ve raster nesnelerinin bir kombinasyonunu birleştirme olasılığı;
- karakter aralığı, eğri metin ve sınırsız yazı tipi kullanımı dahil olmak üzere metinle geliştirilmiş çalışma;
- web görüntülerinde yüksek çözünürlüklü gradyan dolguları, gölgeler, filtreler vb. kullanma açısından renk doğruluğunun daha verimli kontrolü ve en geniş olasılıklar;
- SVG formatının metinsel yapısı ve bir web sitesini güncelleme sürecini büyük ölçüde basitleştiren ve gerekirse özel programlara başvurmadan üzerinde değişiklik yapılmasına izin veren basamaklı stil sayfaları desteği;
- SVG görüntülerini veritabanına kaydetmenize ve bunları kullanarak dinamik web sayfaları oluşturmanıza olanak tanıyan XML (Genişletilebilir İşaretleme Dili) ve CSS (Basamaklı Stil Sayfaları) veritabanlarıyla entegrasyon - farklı platformlar, kişisel ayarlar vb. için farklı;
- indeksleme sorunu yok - SVG dosyaları herhangi bir arama motoru tarafından indekslenir (örneğin, SWF dosyalarının aksine).
Kullanıcılar, yüksek kaliteli ve hızlı yüklenen SVG içeriğini takdir edeceklerdir. Ek olarak, SVG görüntüsünde bulunan metni kopyalamak ve böylece kendiniz için bazı yararlı bilgileri kaydetmek ve ayrıca görüntüde, örneğin arama yaparken, bazı durumlarda son derece gerekli olabilecek metin aramak mümkündür. harita veya çizim üzerinde istenilen isim...
Bununla birlikte, her zamanki gibi, SVG teknolojisinin artılarının yanı sıra, eksileri ve çok ciddileri de var.
- SVG görüntüleri, web tarayıcısı satıcıları tarafından yeterince desteklenmemektedir. Sonuç olarak, SVG grafiklerini bir tarayıcıdan görüntülemek için kullanıcılar, Adobe'nin SVG Görüntüleyicisi gibi bu özelliği sağlayan üçüncü taraf bir eklentiyi ek olarak yüklemek zorunda kalırlar. Teorik olarak, bu zor değildir - ilgili eklentilerin kurulumu kolaydır, ücretsizdir, küçük bir hacme sahiptir ve İnternet üzerinden hızlı bir şekilde indirilebilir. Pratikte, çoğu İnternet kullanıcısı bu olasılıkların varlığından haberdar olmadığı ve bu nedenle göremediği için her şey çok daha karmaşık hale geliyor. verilen görünüm grafikler - bir eklenti olmadan, basitçe görünmez. Ancak durum yavaş yavaş değişiyor ve geçtiğimiz yıl iki önde gelen web tarayıcı geliştiricisi SVG formatı için destek uygulamaya koydu. İlkbaharda, Opera Software, SVG 1.0 Tiny'yi destekleyen Opera tarayıcısının 8. sürümünü yayınladı; Opera 9.0'ın sonraki sürümünde, SVG 1.0 Basic formatının kısmi desteği uygulanmaktadır. SVG desteğini içeren ikinci geliştirici, Mozilla Organizasyonu'dur. Firefox tarayıcısı 1.5, 1.1 spesifikasyonundan SVG grafik görüntüleyici sağlayan Mozilla SVG proje modülünü içerir. Ayrıca, 2005 yılının ortalarında, Mac OS X çalıştıran bilgisayarlarda çalışan Safari tarayıcısının geliştiricileri, SVG 1.1 desteğinin uygulanması konusunda aktif çalışmalara başladılar;
- Diğer grafik formatlarıyla karşılaştırıldığında, SVG formatı, grafik yazılım geliştiricileri tarafından hala zayıf bir şekilde destekleniyor, ancak aşağıdaki gibi önde gelen grafik paketleri Adobe illüstratör, Corel DRAW, vb., grafikleri SVG dosyalarına aktarmanıza izin verir. Elbette, SVG dosyaları herhangi bir metin düzenleyicide oluşturulabilir, ancak bu, hız ve düşük geliştirme maliyeti açısından pratik değildir. Gerekirse dosyayı bir metin düzenleyicide düzenlemek uygundur (bu arada, yalnızca derin bir XML teknolojisi bilgisine sahipseniz mümkündür), ancak aşırı bir işlem gerektireceğinden sıfırdan oluşturmak mantıksızdır. zaman ve emek yatırımı. Bu, basit ve kullanışlı hızlı araçlar gerektirir. görsel gelişimÖlçeklenebilir Vektör Grafikleri formatındaki grafikler, aynı ortamda görüntüye karşılık gelen program kodunu düzenleme imkanı ile birlikte, ancak bu tür çok az ürün vardır ve iyi bilinmemektedir.
Sonuç olarak, çok üzücü bir durum ortaya çıkıyor - birçok kullanıcı, web tarayıcıları tarafından uygun düzeyde desteklenmemesi nedeniyle SVG grafiklerini henüz görüntüleyemiyor, web geliştiricileri ne kadar çekici olursa olsun pratik olarak SVG grafikleri geliştirmiyor, ve yazılım geliştiriciler, web tasarımcılarını çeşitli SVG'ye özgü uygulamalarla şımartmazlar. Sonuç bir kısır döngüdür: "İçerik yoksa, insanların SVG'nin uygulanmasına ihtiyacı yoktur ve uygulama yoksa içerik de yoktur" - toplantılardan birinde durum böyle açıklandı W3C konsorsiyumunun
Ancak duruma diğer taraftan da bakabilirsiniz: iki popüler İnternet tarayıcısı tarafından SVG desteği (henüz tam olarak olmasa da) ve ayrıca seçkin geliştiricilerin teknolojisine olan ilgi, buzun kırıldığını ve SVG'nin gerçek bir web bilgilerini sunmak için popüler formatlardan biri olma şansı. Bu şans, görüntülerin boyut ve kalitesi gereksinimlerinin çok daha yüksek olduğu mobil cihazlarla ilgili olarak SVG teknolojisine artan ilgiyle bağlantılı olarak da artmaktadır. Örneğin Opera Software, önce tam SVG desteğini masaüstlerinde uygulamayı ve ancak daha sonra mobil platformlara taşımayı umuyor. Bu nedenle, SVG ve web tasarımcılarını kullanmayı düşünmenin zamanı geldi - aksi takdirde yakın gelecekte geride kalanlar arasında olma riskiyle karşı karşıya kalırlar.
SVG grafiklerini görüntülemek için eklentiler
Daha önce de belirtildiği gibi, şimdilik çoğu kullanıcının SVG grafiklerini bir İnternet tarayıcı penceresinde tam olarak görüntülemek için uygun eklentilerden birini kullanması gerekecek, en ünlüleri ücretsiz olanlar. Adobe modülleri SVG Görüntüleyici ve Corel SVG Görüntüleyici. Bunlardan ilki - Adobe SVG Viewer - bağımsız bir uygulama olarak sunulur, kompakt ve kullanışlıdır, farklı platformlarda çalışır, çok sayıda İnternet tarayıcısını destekler ve bu nedenle kullanıcılar arasında çok daha popülerdir. Corel SVG Viewer, Corel Smart Graphics Studio'ya dahildir, ancak ücretsiz olarak da mevcuttur.
SVG grafiklerini görüntülemek için başka seçenekler de vardır - örneğin, Amaya paketlerinden (http://www.w3.org/Amaya/), Apache Batik'ten (http://xml.apache.org) ilgili modülleri kullanabilirsiniz. /batik), KDE KSVG (http://www.kde.org) ve diğerleri.SVG resim görüntüleme uygulamalarının tam listesi için bkz. http://wiki.svg.org/Viewer_Implementations.
Adobe SVG Görüntüleyici
Geliştirici: Adobe Systems, Inc.
Dağıtım boyutu: 2.25 MB
Dağıtım yöntemi:ücretsiz yazılım (http://download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.03/en/SVGView.exe)
Fiyat: bedava
Kontrol altında çalışın: Windows 95/98 / Me / NT / 2000 / XP, Mac OS 8.6 / 9 / X, Linux, Solaris
Tarayıcı desteği: Internet Explorer sürüm 4.0 ve üstü, Netscape Navigator veya Communicator 4.5 ila 4.78 (6.x sürümleri hariç)
Corel SVG Görüntüleyici
Geliştirici: Corel Corp
Dağıtım boyutu: 4,9 MB
Dağıtım yöntemi:ücretsiz yazılım (modül şu adresten indirilebilir: http://www.corel.com/servlet/Satellite?pagename=Corel/Downloads/Details&id=1042152917172)
Fiyat: bedava
Kontrol altında çalışın: Windows 98 / NT / 2000 / Ben / XP
Tarayıcı desteği: Microsoft Internet Explorer 5.5 veya üzeri, Netscape Navigator veya Communicator 4.79, 7.02 sürümleri
SVG grafikleri oluşturmak için programlar
SVG grafikleri oluşturmak için tüm programlar üç büyük gruba ayrılabilir. İlki, vektör grafikleriyle çalışmaya odaklanan ve aynı zamanda görüntüleri SVG formatına aktarmanıza izin veren popüler iki boyutlu grafik paketlerini içerir. Bunların en popülerleri Adobe Illustrator ve CorelDRAW; ek olarak, bir dereceye kadar bu tür dışa aktarma, diğer birçok uygulamayı destekler: AutoCAD, Microsoft Visio, vb. Bu uygulama grubunun ana avantajı, vektör görüntüleri oluşturmak için gelişmiş araçlara sahip olmaları ve kullanım yoluyla benzersiz efektler elde etmenize izin vermeleridir. asetatlar, dolgular, çeşitli filtreler vb. gibi. Ancak bu uygulamalar ciddi bir özel eğitim gerektirir ve bu nedenle çoğunlukla profesyonel tasarımcılar için tasarlanmıştır. Ek olarak, genellikle SVG tasarımına odaklanmazlar (Grafikleri Ölçeklenebilir Vektör Grafikleri formatında almanıza izin verseler de) - görüntülerin uygun görsel oluşturma ve gösterimini sağlar, bu uygulamalar metinde ayarlanmasına izin vermez. SVG grafikleriyle ilgili olan seviye. Önemli bir gerçek, Ölçeklenebilir Vektör Grafikleri formatı desteğinin bunlarda tam olarak uygulanmadığı ve bunun sonucunda tüm vektör görüntü öğelerinin hatasız SVG'ye aktarılamadığıdır.
İkinci grup yazılım ürünleri, yalnızca SVG grafikleri oluşturmak için tasarlanmış paketlerden oluşur. Gerekli tüm araçları içermelerine rağmen, vektör görüntülerin görsel gelişimi açısından çok daha az olanaklara sahiptirler. Ancak diğer yandan, kaynak kodu düzenlemek için uygun araçlar sağlarlar ve hem görsel modda hem de kod düzeyinde SVG nesneleriyle paralel olarak çalışmanıza izin verirler ve bilgi sunmak için bu seçenekler arasında kolayca geçiş yapabilirsiniz. Bu gruptaki tüm uygulamalar çok basit ve erişilebilirdir ve öğrenmek için çok zaman gerektirmez. Ek olarak, nispeten küçük dağılımları vardır (birinci grubun uygulamalarına kıyasla), bu nedenle İnternet üzerinden sorunsuz bir şekilde satın alınabilirler. Bununla birlikte, bu tür yeteneklere sahip çok az program vardır ve aşağıda en çok ilgi çeken ve farklı kullanıcı kategorileri için tasarlanmış sadece dört tanesini ayrıntılı olarak ele alacağız. İLE BİRLİKTE tam liste SVG grafikleri oluşturmaya yönelik uygulamalara http://wiki.svg.org/Design_Tools adresinden ulaşılabilir.
Ve son olarak, üçüncü gruba normal bir not defteri de dahil olmak üzere herhangi bir metin düzenleyici ekleyebilirsiniz. Yukarıda belirtildiği gibi, Ölçeklenebilir Vektör Grafikleri formatı XML tabanlıdır ve gerektiğinde bir metin düzenleyicide metin düzeyinde SVG dosyaları oluşturmanıza ve düzenlemenize olanak tanır.
SVG grafikleri oluşturmak için tam özellikli grafik uygulamaları
Adobe Illustrator CS2
Geliştirici: Adobe Systems, Inc.
Dağıtım boyutu: Macintosh sürümü - 428.9 MB, Windows sürümü - 398.6 MB
Dağıtım yöntemi: shareware (paketin 30 günlük demosu şu adreste bulunabilir: http://www.adobe.com/products/tryadobe/main.jsp#product=27)
Fiyat: USD 665
Kontrol altında çalışın: Windows 2000 Service Pack 3 veya Windows XP, Mac OS X 10.2.4 ila 10.2.7, Java Çalışma ZamanıÇevre 1.4.1
Adobe Illustrator'daki 9. sürümden başlayarak (Şekil 3) SVG dosyalarının içe ve dışa aktarımı, benzer grafik uygulamalarına kıyasla çok daha yüksek bir düzeyde uygulanmaktadır. Paket, mevcut tüm SVG Malzeme Listelerini, ISO 8859-1, UTF-8 ve UTF-16 kodlamalarını destekler, farklı seçenekler metni dışa aktarır ve görüntüleri hem normal SVG biçiminde hem de sıkıştırılmış SVGZ biçiminde dışa aktarmanıza olanak tanır.
Onun ortamında oluşturulan SVG grafiklerinde, çeşitli gölgeler, bulanıklık vb. şeklinde özel olarak sağlanan bir dizi SVG efektinin (Efekt => SVG Filtreleri) yanı sıra degradeleri, saydamları kullanabilirsiniz. Bu tür efektlere sahip görüntüler korunur herhangi bir büyütme ile web tarayıcısında görüntülendiğinde netlikleri. Statik grafiklere ek olarak, Illustrator ayrıca SVG formatında etkileşimli grafikler almanıza izin verir - bu amaçla, etkileşimli nesneler için eylemlerin yapıldığı özel bir SVG Etkileşim paleti sağlanır (Pencere => SVG Etkileşimi menüsünden açabilirsiniz). ayarlanır. Illustrator'da etkileşimli SVG öğeleri üzerinde çalışmanın Java Script dili bilgisini ve nesne yönelimli programlamanın temel ilkelerini anlamayı gerektirdiğini belirtmekte fayda var. Ayrıca bu programda bulunan Ölçeklenebilir Vektör Grafikleri formatını kullanarak dinamik veri grafikleri (Dinamik Veriye Dayalı Grafikler) oluşturabilirsiniz.
CorelDRAW Grafik Paketi 12
Geliştirici: Corel Corp.
dağıtım boyutu tiva: 200 MB
Dağıtım yöntemi: shareware (demo sürümü çevrimiçi mağazaların web sitelerinden indirilebilir, örneğin: http://allsoft.ru/Download.php?ver=17605)
Fiyat: USD 290 (Allsoft.ru)
Kontrol altında çalışın: Windows NT / 2000 / XP
Profesyonel gelişim için ünlü uygulama vektör grafikleri CorelDRAW Graphics Suite 12'de bulunan CorelDRAW (Şekil 4), SVG ve SVGZ formatlarında temel düzeyde içe ve dışa aktarma sağlar ve bu nedenle statik ve etkileşimli SVG grafikleri oluşturmak için kullanılabilir.
CorelDRAW'da SVG dosyasına
Uygulama, tanınmayan veriler, nitelikler ve meta veriler için destek uygular ve ayrıca yetenek sağlar Ön izleme SVG dosyalarını dışa aktarmadan önce tarayıcıda Ek olarak, UTF-8 ve UTF-16 kodlama yöntemleri için Unicode kodlaması ve metin ve bitmap görüntülerini dışa aktarmak için çeşitli seçenekler mümkündür. En son sürüm, sembolleri, metni, gölgeleri, yolları, katmanları, gömülü ikili dosyaları ve daha fazlasını dışa aktarma desteğini önemli ölçüde geliştirdi.
Mayura Beraberlik 4.3
Geliştirici: Mayura Yazılım
Dağıtım boyutu: 1,3 MB
Dağıtım yöntemi: shareware (demo versiyonu - http://www.mayuradraw.com/mdraw.zip)
Fiyat: 39 ABD doları
Kontrol altında çalışın: Windows 95/98 / Ben / NT / 2000 / XP
Mayura Draw (Şekil 5) genel kullanıcı için tasarlanmış çok basit ve ucuz bir vektör grafik programıdır. Elde edilen vektör görüntüleri istenirse SVG formatına aktarılabilir ve bu nedenle Mayura Draw olası çözüm statik SVG grafikleri geliştirmek için. Program, tüm önemli vektör grafik araçlarını destekler ve grafik temelleri, doğrusal ve eğri yollar ve metne dayalı vektör görüntüleri elde etmenize olanak tanır. Yeteneklerinin listesi, nesneleri hizalamak, dağıtmak ve düzenlemek, şeffaflığı kontrol etmek, nesnelerin hassas yerleşimi için kılavuzları ve cetvelleri kullanmak ve çeşitli dönüşümler için uygun araçlar içerir.
SVG grafikleri oluşturmak için özel paketler
EvolGrafiX XStudio 6.1
Geliştirici: EvolGrafiX
Dağıtım boyutu: 7,25 MB
Dağıtım yöntemi: http://www.evolgrafix.de/htDocs/files/trials/xstudio6x/XStudio6-Trial.exe)
Fiyat: 449 $ ticari lisans, 249 $ akademik lisans
Kontrol altında çalışın: Windows 2000 / XP
Profesyonel paket XStudio (Şekil 6) Web ve mobil cihazlar için çok yönlü SVG grafikleri oluşturmak için uygun bir araçtır ve hem bir bütün olarak SVG projesi hem de vektör görüntüleri, animasyon, komut dosyaları vb. üzerinde tam kontrol sağlar. kullanışlı , sezgisel ve son derece özelleştirilebilir bir kullanıcı arayüzü, geniş bir araç yelpazesi sunar, hızlıdır, mevcut tüm spesifikasyonlarda SVG grafikleri oluşturmanıza olanak tanır ve tüm Ölçeklenebilir Vektör Grafikleri stillerini destekler. Tüm bunlar, profesyonel bir paket için nispeten düşük bir fiyatla birleştiğinde, onu bu türdeki en iyi profesyonel çözüm haline getirir. XStudio, bir dizi öğreticiyle tamamlanmış ayrıntılı belgelerle birlikte gelir ve öğrenmesi kolaydır.
Pirinç. 6. Görsel görüntü oluşturmayı kaynak kod düzenleme ile birleştirme
EvolGrafiX XStudio'da
Uygulama, vektör görüntüleri oluşturmak ve işlemek için gerekli tüm yeteneklere sahiptir ve bu açıdan Adobe Illustrator paketine çok benzer. Aynı zamanda, XStudio doğrudan statik, etkileşimli ve animasyonlu SVG grafiklerinin hazırlanmasına odaklanır ve bu nedenle vektör nesneleriyle çalışmak için klasik araçlarla birlikte belirli SVG yetenekleriyle desteklenir. Yerleşik Belge Nesne Modeli (DOM) araç çubuğu, SVG nesnelerinin hiyerarşik bir sunumunu sağlar, uygun bir XML düzenleyici, kaynak kodunu metin düzeyinde düzeltmenize ve komut dosyası düzenleyicisi, Java komut dosyalarıyla tamamlamanıza olanak tanır. Kodla çalışmak çok uygun bir şekilde organize edilmiştir: seçilen nesnenin kodunun parçaları otomatik olarak vurgulanır, metin aramak ve yer imleri ayarlamak vb. mümkündür. Koddaki herhangi bir değişiklik anında görsel görüntüleme penceresine yansıtılır ve görsel editör penceresindeki değişiklikler.
Inkscape
Geliştirici: IOSN (Uluslararası Açık Kaynak Ağı)
Dağıtım boyutu: 8,7 MB
Fiyat: bedava
Kontrol altında çalışın: Windows 9x / NT / 2000 / XP, Mac OS X, Linux
Inkscape (Şekil 7), çoklu platform olan ve Ölçeklenebilir Vektör Grafikleri standardına göre grafikler geliştirmek için güçlü bir araç olan Açık Kaynak modeline dayalı en umut verici vektör düzenleyicisidir. Inkscape, vektör işlevselliği ve arayüzü açısından CorelDRAW'a çok benzer. Alfa kanalları için destek, katmanlarla çalışma, akıcı metin kullanımı, muhteşem degrade dolgular, çok sayıda filtre ve efekt, çeşitli dönüşümler, yollar ve nesnelerle rahat çalışma, nesneleri gruplama ve çok daha fazlasını uygular. Şuradan veri içe aktarma JPEG dosyaları, PNG ve TIFF ve bunları SVG görüntülerine gömün.
yerleşik Inkscape düzenleyici
Ancak CorelDRAW'dan farklı olarak Inkscape, SVG tasarımcıları için bir uygulama olarak konumlandırılmıştır, bu nedenle klasik görsel grafik oluşturma ile birlikte, XML kodunu entegre bir metin düzenleyicide doğrudan işleme yeteneği sağlar. Program, görüntüleri normal ve sıkıştırılmış SVG dosyalarına kaydedecek şekilde yapılandırılmıştır, ancak bunlar ortak vektöre dönüştürülebilir ve bit eşlem biçimleri.
Inkscape paketi kullanışlı bir Rus arayüzüne sahiptir, öğrenmesi kolaydır ve iyi bir yardım sistemi, çeşitli kullanım durumları dahil ve buna ek olarak, bu başvuruücretsiz - tüm bunlar onu çok çeşitli kullanıcılar için çok çekici kılıyor. Programın ana dezavantajları, düşük hızı ve sistem kaynakları için artan gereksinimleridir.
Corel WebÇizim
Geliştirici: Corel Corp
Dağıtım boyutu: 15,6 MB
Dağıtım yöntemi: shareware (30 günlük demo - http://www5.jasc.com/pub/wdw102ev.exe)
Fiyat: 179 $ indirme, 199 $ CD
Kontrol altında çalışın: Windows 98 / NT4 / 2000 / Me / XP
Daha çok Jasc WebDraw olarak bilinen Corel WebDraw (Şekil 8), profesyonel tasarımcılar için yüksek kaliteli SVG grafikleri ve animasyonları oluşturmaya yönelik tek duraklı bir çözümdür. Ve programın sezgisel arayüzü, onu çok çeşitli kullanıcılar için çekici kılıyor.
Uygulama, tam özellikli bir vektör grafik uygulaması için tipik olan kapsamlı bir standart grafik araçları seti sağlar: temel şekiller (elips, dikdörtgen, yıldız, vb.), kalem, çokgen, çoklu çizgi, metin vb. Vektör nesnelerinin yanı sıra WebDraw, SVG nesnelerine harici bit eşlemler eklemenize olanak tanır. Hazır stillerin olağan dolgularına ve bindirmesine ek olarak, kendi oluşturduğunuz desenler de dahil olmak üzere karmaşık degradeler, dolgular kullanabilirsiniz. Daha etkili görüntüler elde etmek için filtreler kullanabilirsiniz - hem yeterince basit (bulanıklaştırma ve üst üste binen gölgeler) hem de karmaşık (dokulama ve aydınlatma). Nesnelerin hassas yerleşimi için ızgaralar, kılavuzlar ve cetveller sağlanmıştır ve yerleşik Belge Nesne Modeli (DOM) araç çubuğu, yönetimi büyük ölçüde basitleştiren hiyerarşik bir ağaçta SVG nesneleri sunar.
WebDraw, üzerine inşa edilmiş çok yönlü bir Animasyon Zaman Çizelgesi ile donatılmıştır. nesne modeli SVG DOM (Belge Nesne Modeli), herhangi bir zamanda her türden bir nesnenin hemen hemen her özniteliğini veya özelliğini seçmenize ve canlandırmanıza olanak tanır. Sürükle ve bırak mekanizması, animasyonun başlangıç ve bitiş noktalarının yanı sıra her bir animasyon aşamasının süresini doğrudan zaman çizelgesinde düzenlemenize olanak tanır. Bir nesnenin özniteliği veya özelliği için animasyon parametrelerini her ayarladığınızda animasyon anahtar noktaları (anahtar zamanı) eklendiğinden, animasyon efektlerinin zaman içindeki dağılımını otomatik olarak ayarlamak için film şeridinin diğer bölümlerine taşınabilirler.
Paket, SVG grafikleriyle iki sürümde çalışmanıza izin verir: hem görsel olarak görüntülenen bir dizi grafik nesnesiyle hem de ilgili kaynak koduyla. Kaynak kodunu yerleşik SVG metin düzenleyicide düzenlemek, dosyaların içeriği üzerinde ek esneklik ve kontrol sağlar. Otomatik kontrol değişiklikler kaynak kodu oluşturulan grafiklerin garantili doğru davranışını elde etmeye yardımcı olur ve bulunan hatalar renklerle işaretlenir, bu da tasarımcıyı yüzlerce kod satırı arasında saatlerce arama yapmaktan kurtarır. Kaynak kodundaki herhangi bir değişikliğin sonucu hemen ekranda görüntülenir. Dilerseniz WebDraw'da diğer uygulamaların ortamında oluşturulan SVG dosyalarını içe aktarabilir, düzenleyebilir ve optimize edebilirsiniz.
Sketsa SVG Düzenleyici 3.2.3
Geliştirici: KIYUT
Dağıtım boyutu: 5,99 MB
dağıtım yöntemi: shareware (bir resme etiket ekleyen demo - http://www.kiyut.com/products/sketsa/sketsa.zip)
Fiyat: 49 ABD doları
Kontrol altında çalışın: Windows 2000 / XP, Java VM (JRE) 1.5 ve üstü (http://www.java.com/getjava), UNIX ve Linux
Sketsa (Şekil 9) en popüler SVG düzenleyicilerinden biridir ve SVGZ optimizasyonları dahil profesyonel SVG grafikleri oluşturmanıza olanak tanır. Paket, basitlik ve rahatlığı çok çeşitli özelliklerle başarıyla birleştirir ve Windows, Mac ve Linux sistemleriyle uyumludur.
Sketsa, herhangi bir vektör uygulaması için tipik olan ve hem yollar hem de grafik temelleri ve istenirse raster görüntülerle kolayca tamamlanabilen metin temelinde herhangi bir vektör nesnesi oluşturmanıza ve dönüştürmenize olanak tanıyan klasik bir araç setini destekler. Şeffaflığı kontrol etmek, degrade dolguları ve filtreleri kullanmak mümkündür. Tüm bunlar, herhangi bir görüntünün yalnızca görsel olarak değil, aynı zamanda metin modunda da düzenlenebildiği özel SVG yetenekleriyle başarıyla tamamlanmaktadır. Paket, SVG kodunu düzenlemek için yerleşik bir XML metin düzenleyicisi sağlar. Nesne yönetimini kolaylaştırmak için, özelliklerini düzenlemek için herhangi bir belge nesnesini seçmenize olanak tanıyan, bir SVG belgesindeki hiyerarşik ağaç benzeri nesneler kümesi olan yerleşik bir Belge Nesne Modeli (DOM) araç çubuğu vardır.
Vektör görüntüleri kavramı, ezici sayıda sıradan PC kullanıcısı için hiçbir şey söylemez. Tasarımcılar da projeleri için bu tür grafikleri kullanmaya giderek daha fazla meyillidir.
Önceden, SVG görüntüleri ile çalışmak için, bilgisayarınıza Adobe Illustrator veya Inkscape gibi özel masaüstü çözümlerinden birini kesinlikle yüklemeniz gerekirdi. Artık bu tür araçlar, indirmeye gerek kalmadan çevrimiçi olarak mevcuttur.
Google'da ilgili talebi tamamladıktan sonra, çok sayıda her türlü vektör çevrimiçi düzenleyicisini tanıyabilirsiniz. Ancak bu tür çözümlerin ezici çoğunluğu oldukça yetersiz yetenekler sunar ve çoğu zaman ciddi projelerle çalışmaya izin vermez. Doğrudan tarayıcıda SVG görüntüleri oluşturmak ve düzenlemek için en iyi hizmetlere göz atacağız.
Tabii ki, çevrimiçi araçlar ilgili masaüstü uygulamalarını tamamen değiştiremez, ancak çoğu kullanıcı için önerilen işlevler seti fazlasıyla yeterli olacaktır.
Yöntem 1: Vektör
Pek çok kişiye tanıdık gelen Pixlr hizmetinin yaratıcılarından iyi düşünülmüş bir vektör editörü. Bu araç, SVG ile çalışırken hem yeni başlayanlar hem de deneyimli kullanıcılar için faydalı olacaktır.
İşlevlerin bolluğuna rağmen, Vectr arayüzünde kaybolmak oldukça zor olacak. Yeni başlayanlar için var detaylı dersler ve hizmetin bileşenlerinin her biri için kapsamlı talimatlar. Düzenleme araçları arasında bir SVG görüntüsü oluşturmak için her şey vardır: şekiller, simgeler, çerçeveler, gölgeler, fırçalar, katmanlarla çalışma desteği vb. Sıfırdan bir resim çizebilir veya kendi resminizi yükleyebilirsiniz.
Dışa aktarma yetenekleri ayrıca Vectr'in en belirgin özelliklerinden birini içerir - düzenleyicide bir SVG projesine doğrudan bağlantı desteği. Birçok kaynak, vektör görüntülerinin doğrudan kendilerine yüklenmesine izin vermez, ancak yine de uzaktan görüntülenmesine izin verir. Bu durumda Vectr, diğer hizmetlerin izin vermediği gerçek bir SVG barındırma olarak kullanılabilir.
Editörün karmaşık grafikleri her zaman doğru şekilde işlemediğine dikkat edilmelidir. Bu nedenle bazı projeler Vectr'de hata veya görsel artifaktlarla açılmayabilir.
Yöntem 2: Eskiz defteri
HTML5 platformuna dayalı SVG görüntüleri oluşturmak için basit ve kullanımı kolay web düzenleyici. Mevcut araçların çeşitliliği göz önüne alındığında, hizmetin tamamen çizim için olduğu söylenebilir. Sketchpad ile güzel, ayrıntılı resimler oluşturabilirsiniz, ancak daha fazlasını değil.
Araç, çeşitli şekil ve türlerde çok çeşitli özelleştirilebilir fırçalara, bir dizi şekil, yazı tipi ve üst üste bindirilecek çıkartmalara sahiptir. Düzenleyici, katmanları tamamen manipüle etmenize, yerleşimlerini ve karıştırma modlarını kontrol etmenize olanak tanır. Bir bonus olarak, uygulama tamamen Rusça'ya çevrilmiştir, bu yüzden ustalaşmakta herhangi bir zorluk yaşamamalısınız.
Yöntem 3: Yöntem Çizimi
Bu web uygulaması, temel vektör dosyası işlemleri içindir. Dıştan, araç masaüstü Adobe Illustrator'a benziyor, ancak işlevsellik açısından burada her şey çok daha basit. Ancak, Method Draw'da bazı özellikler vardır.
SVG görüntüleri ile çalışmanın yanı sıra düzenleyici, bitmap görüntüleri içe aktarmanıza ve bunlara dayalı vektör oluşturmanıza olanak tanır. Bu, bir kalemle konturların manuel olarak izlenmesi temelinde yapılabilir. Uygulama, vektör çizimleri oluşturmak için gerekli tüm araçları içerir. Kapsamlı bir şekil kitaplığı, tam bir renk paleti ve klavye kısayolları desteği vardır.
Method Draw kesinlikle ciddi vektör projeleri oluşturmak için uygun değildir - bunun nedeni uygun fonksiyonların olmamasıdır. Ancak gereksiz öğelerin olmaması ve iyi organize edilmiş bir çalışma alanı nedeniyle hizmet, basit SVG görüntülerinin hızlı düzenlenmesi veya tam olarak iyileştirilmesi için mükemmel bir şekilde kullanılabilir.
Yöntem 4: Gravit Tasarımcısı
İleri düzey kullanıcılar için ücretsiz web tabanlı vektör grafik düzenleyici. Birçok tasarımcı, Gravit'i Adobe Illustrator gibi tam teşekküllü masaüstü çözümleriyle aynı seviyeye getiriyor. Gerçek şu ki, bu araç platformlar arası, yani bir web uygulamasının yanı sıra tüm bilgisayar işletim sistemlerinde tamamen kullanılabilir.
Gravit Designer aktif olarak geliştirilmektedir ve düzenli olarak karmaşık projelerin yerleşimi için yeterli olan yeni özellikler almaktadır.
Düzenleyici size ana hatlar, şekiller, yollar, metin bindirmeleri, dolgular ve çeşitli özelleştirilebilir efektler çizmek için her türlü aracı sunar. Kapsamlı bir şekiller, temalı resimler ve simgeler kitaplığı vardır. Gravit uzayındaki her öğe, değiştirilebilecek bir özellik listesine sahiptir.
Tüm bu çeşitlilik, şık ve sezgisel bir arayüzde "paketlenmiştir", böylece herhangi bir araç sadece birkaç tıklamayla kullanılabilir.
Hizmetin vektör grafikleriyle tam teşekküllü çalışma için tasarlandığını düşünürsek, profesyonel tasarımcılara bile güvenle önerilebilir. Gravit ile, bulunduğunuz platformdan bağımsız olarak SVG resmini düzenleyebilirsiniz. Şimdiye kadar bu açıklama yalnızca masaüstü işletim sistemleri için geçerliydi ancak yakında bu düzenleyici mobil cihazlarda görünecek.
Yöntem 5: Janvas
Web geliştiricileri arasında popüler bir vektör grafik aracı. Hizmet, son derece özelleştirilebilir özelliklere sahip bir dizi çizim aracı içerir. Janvas'ın ana özelliği, animasyonlu etkileşimli SVG görüntüleri oluşturma yeteneğidir. CSS kullanarak... JavaScript ile birlikte hizmet, tüm web uygulamalarını oluşturmanıza bile izin verir.
Doğru ellerde, bu editör gerçekten güçlü bir araçtır, yeni başlayanlar, her türlü işlevin bolluğu nedeniyle, büyük olasılıkla neyin ne olduğunu anlamayacaktır.
Evet, araç ne yazık ki ücretsiz değil. Ancak bu, herkes için yararlı olmayan profesyonel bir çözümdür.
Yöntem 6: DrawSVG
Web yöneticilerinin siteleri için mümkün olduğunca basit bir şekilde yüksek kaliteli SVG öğeleri oluşturmasına olanak tanıyan en uygun çevrimiçi hizmet. Düzenleyici, etkileyici bir şekiller, simgeler, dolgular, degradeler ve yazı tipleri kitaplığı içerir.
DrawSVG yardımıyla her tür ve özellikte vektör nesneleri tasarlayabilir, parametrelerini değiştirebilir ve ayrı resimler olarak oluşturabilirsiniz. Üçüncü taraf multimedya dosyalarını SVG'ye gömmek mümkündür: bir bilgisayardan veya ağ kaynaklarından video ve ses.
Bu düzenleyici, diğerlerinden farklı olarak, bir masaüstü uygulamasının tarayıcı bağlantı noktası gibi görünmüyor. Solda ana çizim araçları ve üstte kontroller var. Ana alan, grafiklerle çalışmak için tuval tarafından işgal edilir.
Görüntü dosyasının, XML biçimindeki bir dizi sıradan metin verisi olduğunu anlamalısınız; bu, görüntüyü herkes tarafından düzenleyebileceğiniz anlamına gelir. Metin düzeltici... Bak, onu incelemek zor değil.
SVG çizimi nasıl açılır?
SVG, bir web sayfasındaki vektör temel öğelerini tanımlamak için web'e özgü bir biçimdir. Tabii ki, SVG görüntüleyicileri arasında modern tarayıcılar amiral gemisidir (Opera, Firefox, Chrome ve IE 9'un en son sürümleri). Tarayıcılar neredeyse tüm SVG öğelerini (animasyon ve ECMAScript dahil) destekler ve Opera %100'e yakındır.
SVG desteği düzeyini gösteren tablo farklı tarayıcılar Temmuz 2010 itibariyle:
| Tarayıcı | Destek seviyesi |
|---|---|
| Opera 10.53 | 95 % |
| krom 4 | 82 % |
| Safari 4.0.5 | 82 % |
| Firefox 3.6 | 62 % |
| Internet Explorer 9 önceki 3 | 52.55 % |
Bu verilerden, SVG'yi Opera tarayıcısının en son sürümüyle açmanın en iyisi olduğunu takip eder. Bu tarayıcı hem Windows hem de Linux için sürümleri vardır, bu nedenle hiç kimse sorun yaşamamalıdır.
Genel olarak, neredeyse tüm görüntüleri görüntüleme ve düzenleme programları SVG'yi destekler, ancak çoğu, komut dosyalarını bırakın, animasyonu yeniden üretemez.
SVG çizimi nasıl düzenlenir?
SVG 1999'dan beri var, ancak dünyanın en büyük iT şirketlerinin desteği sayesinde, yaratılmasından yalnızca uzun yıllar sonra aktif olarak gelişmeye başladı. Biçim yeni olmaktan uzaktır, bu nedenle çalışmak için kendine saygılı herhangi bir yazılım bu biçimi desteklemekle yükümlüdür.
Vektör grafik yazılımı listesini içeren bir tablo, liste öğelerinin çoğu SVG'yi destekler:
| İsim | Geliştirici | Fiyat |
|---|---|---|
| Otomatik İzleme | Martin Weber | Bedava |
| Kolay iz | Kolay İzleme Grubu | 1500 €, 750 € yükseltme |
| serbest el | makromedya | 399 $, 99 $ yükseltme |
| illüstratör | Adobe sistemleri | 499 $, 169 $ yükseltme |
| MagicTracer | Elgoritmalar MagicTracer | $59 |
| MST Görüntüleyici | MS Teknolojisi | Yalnızca Ticari Kullanım |
| Fotoğraf Çizgisi | Computerinsel GmbH | 59 € |
| Potrace | Peter Selinger | Bedava |
| R2V Araç Takımı | AlgoLab | $99 |
| Ras2Vec | Davide Libenzi | Bedava |
| Image2XAML | Roma Kalachik | Bedava |
| Vektöre Raster | Vektöre Raster | $99 |
| RasterVect | RasterVect | $79 |
| RaveGrid | RaveGrid | kişisel kullanım için ücretsizdir (ticari versiyon mevcut) |
| Scan2CAD Pro | Kapaklı Intn "l | 469 $, 190 $ yükseltme |
| siluet profesyonel | Ücretsiz Soft S.A. | $359 |
| Adobe düzene | Adobe sistemleri | ? |
| vektör büyüsü | vektör büyüsü | 7.95 $ / ay, 295 $ / lisans, jetonlar |
| Vextractor | VextraSoft | $99 |
| VPHybridCAD | softelec | $1400 |
| Ücretsiz WinTopo Yazılımı | Yumuşak Yumuşak | Bedava |
| WiseImage | Tutarlı Yazılım | $1400 |
| RasVektör | Daniel Lu | GPL |
| Xara aşırı | Xara Group Ltd. | 79$ Windows sürümü, Linux sürümü ücretsizdir |
| XTrace | Ronny Schütz | Amiga için 25 $ (demo mevcut) |
| VektörŞimdi | Otomatik DWG | $120.00 |
| TasarımSunum | TasarımSunum | Kullanım başına ödeme |
Aşağıda SVG oluşturmak ve düzenlemek için en popüler programların bir listesi bulunmaktadır.
Inkscape
Inkscape, vektör görüntüleri oluşturmak ve düzenlemek için bir programdır, ana uygulama alanı teknik çizimler ve diyagramların oluşturulmasıdır. C++ ve GTK+ ile yazılmıştır. Oluşturulan görüntüleri SVG 1.1 formatında kaydedebilir. Inscape birçok platformda (Windows, Linux, Mac OS) mevcuttur ve ücretsiz olarak sınıflandırılmıştır. yazılım, GNU Genel Kamu Lisansı altında dağıtılır.
Program, bir tasarımcı için gerekli tüm filtreleri ve araçları kullanmanıza izin verir: geometrik ilkeller (çokgenler, daireler, çizgiler, eğriler, küpler, vb.), fırçalar, dolgu, silgi. Görsel düzenleyiciye ek olarak, XML öğe ağacını görsel olarak görmenizi ve düzenlemenizi sağlayan bir metin düzenleyici de vardır.
Inkscape uzun yıllardır aktif olarak gelişiyor, geliştiriciler Gimp, Scribus'tan meslektaşları ile iletişim kuruyor ve deneyim alışverişinde bulunuyor.
Inkscape'i herhangi bir işletim sistemi için ücretsiz olarak inkscape.org resmi web sitesinden indirebilirsiniz.
görüntü büyüsü
Grafiklerle çalışmak için Image Magick konsol yardımcı programının hemen hemen tüm işlevleri SVG'ye kadar uzanır. Image Magick ücretsizdir, birçok uygulama için bu yardımcı programla kendi arayüzü aracılığıyla iletişim kurmanıza izin veren kitaplıklar vardır. Örneğin - PHP'de Imagick.
SVG ile çalışmak için ücretli yazılım
Adobe Illustrator CS2
Adobe Systems, Inc. tarafından geliştirilmiştir. Adobe Illustrator CS2, oldukça güçlü SVG düzenleme araçları içerir. Program ücretsiz değil ve hiç de ucuz değil, 600 dolardan fazlaya mal oluyor, ancak 30 günle sınırlı ücretsiz bir demo sürümü var. İlk bakışta, Inkscape ile karşılaştırıldığında SVG ile çalışma alanında herhangi bir özel avantajı yoktur, ancak Photoshop hayranlarının iki program arasındaki benzerlik düzeyini beğeneceği dışında. Bossno, Adobe için uzun zaman tasarımcılar için en kullanıcı dostu arayüzü oluşturdu.
CorelDRAW Grafik Paketi
SVG'nin geliştirilmesiyle Corel Corp. CorelDRAW Graphics Suite, ölçeklenebilir vektör grafikleri için destek içerir. Maliyeti neredeyse 300 dolar, ancak bir demo sürümü var. Yalnızca Windows için kullanılabilir.
Corel ayrıca satın almayı teklif ediyor Corel WebDraw (Jasc WebDraw), daha çok vektör web grafiklerine ve profesyonel web tasarımcılarına odaklandı. Maliyet 180 dolar.
Sketsa SVG Editörü
Program tamamen Java ile yazılmıştır, Windows, Linux, Mac OS altında çalışır. Genel olarak diğer vektör grafik programlarından farklı olarak Sketsa, kesinlikle SVG odaklıdır. Oldukça hoş ve kullanıcı dostu bir arayüze sahiptir. Ancak, neredeyse 90 dolara mal oluyor.
Mayura Beraberlik 4.3
Daha basit ücretli çözümler de var. Örneğin - 39 $ için Mayura Draw, dağıtım kitinin boyutu sadece 1,3 MB'dir. Program, hafif ve nispeten hızlı SVG grafiklerini düzenlemek için tüm ana araçları destekler.
Çevrimiçi SVG düzenleyici
Tarih: 2010.05.27 14:20:46Lütfen materyali kopyalarken makaleye aktif bir bağlantı koyun.
SVG (Ölçeklenebilir Vektör Grafikleri), XML biçimlendirme dilinde yazılmış çok güçlü, ölçeklenebilir bir vektör grafik dosyasıdır. Bu uzantı ile nesnelerin içeriklerini görüntülemek için hangi yazılım çözümlerinin kullanılabileceğini öğrenelim.
Ölçeklenebilir Vektör Grafiklerinin bir grafik formatı olduğu düşünüldüğünde, bu nesnelerin görüntülenmesinin öncelikle resim görüntüleyiciler ve grafik düzenleyiciler tarafından desteklenmesi doğaldır. Ancak, garip bir şekilde, şimdiye kadar, nadir resim görüntüleyiciler, yalnızca yerleşik işlevlerine dayanarak SVG'yi açma göreviyle başa çıkıyor. Ek olarak, incelenen formattaki nesneler, bazı tarayıcılar ve bir dizi başka program kullanılarak görüntülenebilir.
Yöntem 1: Gimp
Her şeyden önce, incelenen formattaki çizimleri ücretsiz grafik editörü Gimp'te nasıl göreceğimize bakalım.
Yöntem 2: Adobe Illustrator
Belirtilen formattaki görüntüleri görüntüleyebilen ve değiştirebilen bir sonraki program Adobe Illustrator'dır.
Yöntem 3: XnView
İncelenen formatta çalışan resim görüntüleyicileri incelememize XnView programı ile başlayacağız.
SVG'yi XnView'da görüntülemenin başka bir yolu daha var. Yerleşik tarayıcı kullanılarak gerçekleştirilir.
Yöntem 4: IrfanView
Örneği ile incelenen resim türlerini görüntülemeyi düşüneceğimiz bir sonraki resim görüntüleyici, IrfanView'dir. SVG'yi adlandırılmış programda görüntülemek için CAD Image DLL eklentisi de gereklidir, ancak XnView'den farklı olarak başlangıçta belirtilen uygulamada yüklenmez.
Bu programdaki resim, dosyadan sürüklenerek görüntülenebilir. "Gezgin" IrfanView kabuğuna.
Yöntem 5: OpenOffice Draw
OpenOffice ofis paketindeki Draw uygulaması da SVG'yi görüntüleyebilir.
Resmi, dosyayı OpenOffice başlangıç kabuğuna sürükleyip bırakarak da görüntüleyebilirsiniz.
Ayrıca Draw kabuğundan da başlatabilirsiniz.
Yöntem 6: LibreOffice Draw
Ölçeklenebilir Vektör Grafik ekranını ve OpenOffice rakibini destekler - Ofis kıyafeti Draw adında bir resim düzenleme uygulamasına da sahip olan LibreOffice.
Başka bir açma yöntemi, bir dosyadan bir dosyayı sürükleyip bırakmayı içerir. dosya yöneticisi LibreOffice başlangıç kabuğuna.
Ayrıca LibreOffice'de, daha önce anlattığımız yazılım paketinde olduğu gibi, Draw kabuğu aracılığıyla SVG'yi görüntüleyebilirsiniz.
Yöntem 7: Opera
SVG, ilki Opera olarak adlandırılan birkaç tarayıcıda görüntülenebilir.
Yöntem 8: Google Chrome
SVG oluşturabilen bir sonraki tarayıcı Google Chrome'dur.
Yöntem 9: Vivaldi
Vivaldi, SVG'leri görüntülemek için örnek olarak kullanılacak bir sonraki web tarayıcısıdır.
Yöntem 10: Mozilla Firefox
SVG'yi başka bir popüler tarayıcıda nasıl oluşturacağımızı bulalım - Mozilla Firefox.
Yöntem 11: Maxthon
Oldukça alışılmadık bir şekilde, SVG'yi Maxthon tarayıcısında görüntüleyebilirsiniz. Gerçek şu ki, bu web tarayıcısında, açılış penceresinin etkinleştirilmesi prensipte imkansızdır: ne grafik kontroller aracılığıyla ne de kısayol tuşlarına basarak. SVG'yi görüntülemek için tek seçenek adresi girmektir. bu nesnenin v adres çubuğu tarayıcı.
Tabii ki, sabit diskinizde yerel olarak bulunan vektörleri açmak için bu seçenek, diğer tarayıcılara göre çok daha zahmetli ve zordur.
Yöntem 12: Internet Explorer
Standart bir tarayıcı örneğini kullanarak SVG'yi görüntüleme seçeneklerini de düşünelim. işletim sistemleri Windows 8.1 dahil Windows satırı - Internet Explorer.
SVG'nin bir vektör görüntü formatı olmasına rağmen, çoğu modern resim görüntüleyici, ek eklentiler yüklemeden onu görüntüleyemez. Ayrıca, tüm grafik düzenleyiciler bu tür resimlerle çalışmaz. Ancak hemen hemen tüm modern tarayıcılar bu formatı görüntüleyebilir, çünkü bir zamanlar her şeyden önce İnternette resim yayınlamak için yaratılmıştır. Doğru, tarayıcılarda belirtilen uzantıya sahip nesneleri düzenlemek değil, yalnızca görüntüleme mümkündür.
Yazardan: SVG görüntüleri, en sevdiğimiz bitmap biçimleri PNG ve JPG kadar yaygın değildir, ancak vektör grafiklerinin faydaları giderek daha fazla tasarımcıyı cezbetmektedir. Tasarımcılar projelerinde vektör grafiklerini giderek daha fazla kullanıyor. Daha önce Adobe Illustrator ve Inkscape gibi masaüstü uygulamalarını indirmemiz gerekiyordu ancak 2017'de tarayıcınızdan çıkmadan vektör grafikleri tasarlayabilirsiniz. Ücretsiz bir SVG düzenleyici arıyorsanız, bu altı ücretsiz araçla başlayabilirsiniz.
vektör
vektör – iyi bir seçim yeni başlayanlar ve ileri düzey SVG kullanıcıları için. Arayüz temiz ve kullanmayacağınız birçok araçla karışık değil. Editör, vektör çizimine yeni başlayanlar için çok uygundur. Kullanıcı ne kullandığı belli olmayan araçlar arasında kaybolmamalıdır. Set birkaç ders içerir. SVG ile tam bir sıfır olsanız bile, hızlı bir şekilde öğrenme yeteneğine sahipsiniz.
Ancak, yukarıdakilerin tümü Vectr'in zayıf işlevselliğe sahip olduğu anlamına gelmez. Normal bir görüntü oluşturmak için tüm temel setleri içerir: şekiller, metin, katmanlar, gölgeler, çerçeveler, arka planlar vb. Tam teşekküllü bir masaüstü düzenleyiciyle karşılaştırılamaz, ancak hızlı tasarımlar ve düzenlemeler için fazlasıyla yeterli. Sıfırdan bir resim oluşturabilir veya mevcut bir resmi yükleyebilirsiniz.
Vectr'e karmaşık çizimler yüklerken hatalar (haritalar veya ayrıntılı diyagramlar) oluşabilir. Düzenleyici karmaşık grafikleri her zaman iyi işlemez. Ancak daha basit SVG'ler (simgeler, logolar vb.) için bu düzenleyici yeterli olacaktır.
JavaScript. Hızlı başlangıç
Çevrimiçi sürümde ihtiyacınız olan işlevler yoksa, uygulamanın masaüstü sürümünü indirebilirsiniz. Düzenleyici Windows, Mac, Linux ve Chromebook'lar için kullanılabilir.
Vectr'deki belki de en havalı özellik, görüntüleri doğrudan Vectr sitesinden bağlayabilmeniz ve gömebilmenizdir, bu da onu verimli bir SVG barındırması yapar. Birçok hizmet SVG dosyalarının yüklenmesini engeller, bu nedenle bu büyük bir artıdır. Vectr'den SVG görüntülerini WP, Medium, Tumblr, vb. gibi SVG'nin doğrudan yüklenmesini engelleyen ancak uzaktan görüntülenmesine izin veren uzak sitelerde görüntüleyebilirsiniz.
Vectr, diğerlerinin oluşturduğunuz grafikleri değiştirebilmesi için düzenleyici panelinde vektör grafiklerini paylaşmanıza olanak tanır. Yani, örneğin, kullanıcıların zaten kendileri için değiştirecekleri bir SVG logo şablonu yapabilirsiniz. Bütün bunlar tarayıcıda.
Bu amaçla, Vectr kısa süre önce editörün bir sürümünü şu şekilde yayınladı: WP için eklenti.
RollApp
Listedeki diğer araçlardan farklı olarak, ana sayfa RollApp, editör önünüzde açılmıyor. RollApp bir uygulama paketidir ve SVG düzenleyicisi uygulamalardan yalnızca biridir. Harika bir araç, bu tarayıcı versiyonu Inkscape.
RollApp ile çalışmak için bir hesaba ihtiyacınız var. Yeni bir tane kaydedebilir veya ile giriş yapabilirsiniz. google'ı kullanmak, Facebook, Amazon. Çok uygun, sadece uygulamayı görmek için binlerce yeni hesap oluşturmaktan nefret ediyorum.
Inkscape'in en iyisi! RollApp, şüphesiz listedeki en zengin özelliklere sahip uygulamadır. Tarayıcınızda tam anlamıyla Inkscape kullanıyorsunuz! Her ayrıntıyı karşılaştırmadım, ancak bu uygulama katmanlar, nesneler, metin, yollar, filtreler, efektler, uzantılar vb. TÜM Incscape özelliklerine benziyor.
Büyük dosyalarİşlemler uygulama sunucularında ve İnternet üzerinden gerçekleştirildiği için çok hızlı işlenmez. Kısacası - büyük ve karmaşık dosyaları düzenlemeniz gerekiyorsa, RollApp ideal değildir, ancak temel set dışındaki diğer görevler için bu düzenleyici diğerlerinden daha iyidir.
BoxySVG
SitePoint'i uzun süredir okuyorsanız, editöre aşina olmalısınız. BoxySVG, çünkü son 12 ayda bunun hakkında zaten konuştuk. Bu daha önce yapıldığı için ayrıntılı bir inceleme yapmayacağım. Bu makale.
JavaScript. Hızlı başlangıç
Keşfetmek JavaScript temelleri bir web uygulaması oluşturmanın pratik bir örneğinde
Daha da önemlisi, Alex'in incelemesinden bu yana BoxySVG, bir kod denetçisi ekleyerek onu web geliştiricileri için en güncel SVG araçlarından biri haline getirdi.
Janvas
Birkaç yıl önce Janvasçok popüler bir SVG editörüydü. Ne yazık ki, bu editör yakın zamanda geliştirilmedi, ancak buna rağmen hala çalışıyor. Web ilerliyor ve Janvas hareketsiz duruyor, bu yüzden ona olan ilgi azaldı. SitePoint'ten Alex, 2013-14'te (ücretli sürüm dahil) bu araçla biraz çalıştı ve hatta bir süreliğine soruları yanıtladı. google sayfası+. Janvas oldukça güçlü bir araçtı.
Janvas'ın temel sorunu, biraz modası geçmiş olmasıdır. Tarayıcılar gelişiyor ve tarayıcıları takip etmeyen uygulamalar her geçen gün daha az kararlı hale geliyor. Janvas'ın birçok özelliği vardır: şekiller, metin, çizim araçları, yollar, maskeler ve katmanlar. Ancak forumlardaki kullanıcılar bu özelliklerin birçoğunun istenilen sonucu getirmediğini söylüyor.
İyi haber şu ki, Chrome uygulaması olarak yeni bir sürüm yayınlanacak. İnşallah sorunları çözerler.
BeraberlikSVG
Zaten ücretsiz bir çevrimiçi SVG düzenleyici seçmiş olabilirsiniz. Değilse, devam edin. BeraberlikSVG- Birçok özelliğe sahip tam uyumlu SVG editörü. Bu uygulamanın tasarımının gerçekten web için uyarlanmış olmasını ve bir tarayıcı için masaüstü uygulamasının bağlantı noktası gibi görünmemesini gerçekten seviyorum. Menü solda bulunur, ikinci seviye menüyü açmak için tıklayın, vb.
DrawSVG ile nesneleri çizebilir, değiştirebilir ve oluşturabilirsiniz. Basit şekiller çizebilirsiniz, Bezier eğrileri, düz ve eğri metinler, birçok kontur ve dolgu stili vb. vardır. Ayrıca SVG, PNG'ye dışa aktarılabilir.
SVG düzenlemesi
SVG düzenlemesi- çevrimiçi vektör grafik editörlerinin dedesi, 2000'lerin ortalarında ortaya çıktı. Sunucu işlevi yoktur, her şey bir tarayıcıda çalışır. Kendi işlevselliğinizi eklemeden çalışmanızı kaydedemezsiniz.
Ancak, hayatı son derece sınırlı ve göze batmayan bir vektör çizim programı olarak başlayan bir editör için SVG-edit işlevi sürekli olarak geliştirildi.
SVG-edit ile basit şekiller (çizgiler, dikdörtgenler, daireler, çokgenler, serbest çizgiler vb.) çizebilir, yolları, katmanları, degradeleri kullanabilir, SVG kaynaklarını görüntüleyebilir ve düzenleyebilir, PNG, JPEG, BMP , WEBP'ye aktarabilirsiniz. , vesaire.
Çözüm
Bu 6 SVG düzenleyicisine ek olarak, başkaları da vardır, ancak çok azı yukarıda gösterilen beşten daha fazla işlevsellik sunar.
SVG konusunda ciddi olmak istiyorsanız ve bu araçlar ihtiyacınız olan işlevselliğe sahip değilse, her zaman Illustrator veya Inkscape gibi bir masaüstü SVG düzenleyicisini indirebilirsiniz. Bununla birlikte, hafiflik, hız ve esneklik için yukarıdaki düzenleyicilerin tümü kullanışlı bir dizi özellik sunar.
not: ayrıca deneyebilirsiniz Figma... Bir SVG editörü değil, daha çok bir UI oluşturucudur. Ancak, harika bir araç setine sahiptir ve iyi optimize edilmiş SVG kodu oluşturur.