Bir web sitesi oluştururken, web tasarımcısının dikkate alması gerekir dört ana nokta Web'in düzenini ve görsel tasarımını düşünmek, metin, resimler, renkler ve yazı tipleri çalışanlar.
Bu dört noktadan bahsedeceğimiz için bu yazıda en çok önem vereceğimiz şey görsellerdir. svg dosyaları nasıl oluşturulur çünkü üzerinde çalıştığınız görüntülerin kalitesini hesaba katmak çok önemlidir.
SVG dosyaları ile tedaviler, profesyoneller tarafından artıyor ve tasarım dünyasında o kadar profesyonel değil.
SVG dosyası nedir?
SVG, Scalabe Vector Graphics, İspanyolca, Scalable Vector Graphics'in İngilizce kısaltmasıdır. hakkında bir açık ve serbest biçim 2D grafikler oluşturmak için, iki boyut.
JPG veya PNG gibi diğer görüntü biçimlerinden farklı olarak, SVG ölçeklenebilir bir formattır, boyutunu ne kadar artırmak isteseniz de, görüntünün kalitesi korunacağından. Web sayfalarında grafik veya vektör görüntü yerleştirmek için en çok kullanılan biçimlerden biridir.
Neden SVG kullanmalıyız?
Bu tür bir formatla, vektör görüntüleri, boyutları ve çözünürlükleri ne olursa olsun yüksek kaliteyi koruyacaktır. Aksine, piksellerden oluşan bitmaplerden oluşan görüntüler yeniden boyutlandırılırsa kalitelerini kaybederler. SVG formatı, hafifliği ve çok yönlülüğü ile tanımlanır.
Bu formatı kullanmanın bir diğer avantajı da küçük boyutudur, yani bu sayede bulundukları sayfaların yüklenme hızını artırır. Bu görüntüler, sunucudaki yükü ve tüketimi azaltmaya yardımcı olan tarayıcı tarafından oluşturulur.
Ek olarak, yapabilirler animasyonlu SVG görüntüleri oluşturun web sitemize bir yakınlık havası vermek ve onu ziyaret eden izleyicilerin dikkatini çekmek için.
SVG açık bir formattır, yani iyileştirmeler ve güncellemelerden geçebilir. Ayrıca SVG dosyaları, örneğin Adobe Illustartor gibi vektör düzenleme programları ile görüntü kalitesinden bir şey kaybetmeden düzenlenebilir, herhangi bir cihazda görüntülenebilir. Ayrıca kaliteden ödün vermeden baskı yapmamızı sağlar.
SVG dosyaları nasıl kolayca oluşturulur
SVG dosyaları oluşturmanın belki de en kolay yolu, eğer bunlara aşina iseniz, diğerleri arasında Illustrator, Corel Draw gibi bir grafik tasarım programı kullanmaktır.
Illustrator programına odaklanarak, SVG formatını kullanacağımız zaman, degradeler veya sanatsal efekt, bulanıklık, fırçalar, pikseller vb. gibi başka efektler kullanıp kullanmadığımızı dikkate almalıyız. SVG dosya biçiminde kaydedildiklerinde rasterleştirildikleri için. Daha sonra rasterleştirilmemeleri için efektler eklemek için SVG filtre efektlerinin kullanılması önerilir..
Size verdiğimiz bir diğer tavsiye ise, daha iyi performans için çizimlerde basit semboller ve yollar söz konusu formatın. Daha yüksek bir veri yükü oluşturduğundan, çok fazla izleme içeren fırçaları kullanmaktan kaçının.
Bu programda bir SVG dosyası oluşturmak için, Açmamız gereken ilk şey, fikrimiz üzerinde çalışacağımız boş bir tuval.
İşimiz bittiğinde, yapacağımız şey programın üzerinde gösterilen araç çubuğuna gitmek ve seçeneğini seçeceğiz. dosya, farklı kaydet ve dosyamıza bir ad vermemizi söyleyen bir açılır ekran görünecektir. ve kaydetmek istediğimiz formatı belirtin. Bu son bölümde SVG seçeneğini işaretlememiz gerekiyor.
SVG tipini seçerken, dikkate alınması gereken farklı seçenekleri gösteren bir iletişim kutusu belirir.
Genel bir kural olarak, tabloda görünen ilk alanda SVG 1.1 profili görünür. Aşağıda bize, bize verdikleri kaynakları seçme seçeneği sunuyor. varsayılan olarak SVG'de işaretlenmiş ve hiçbiri olarak alt kümelenmiş metindir. Bizim durumumuzda, bu çalışma yazı tiplerine sahip değil, olsaydı, alt kümeler seçeneğinin hiçbirinden tüm piktogramlara değiştirilmesi gerekirdi.
Aşağıdaki bölüm çok önemlidir, eğer işaret edersek gömme seçeneği, kompozisyonun görüntüleri dosyaya dahil edilecektir, çok fazla bitmap görüntüsü kullanırsak kilo almasına neden olur. Öte yandan, bağlantı seçeneğini işaretlersek, bir web sitesinde kullanacaksak resimlere dikkat etmeliyiz, çünkü resimlerimizin dosyalarını dahil etmemiz ve ayrıca en önemlisi onların bakımını yapmamız gerekir. yol. Bu seçeneğin avantajı, dosyaların çok daha az ağırlığa sahip olmasıdır.
Gelişmiş seçenekler bölümünde şu seçeneği buluyoruz: SVG kodu, bu seçenek dosyanın nasıl içinde olduğunu gösterir, yani çalışmamızın arkasındaki kod. SVG dosyanızı örneğin kişisel WordPress'inize eklemek istiyorsanız bu seçenek çok önemlidir, kodu kopyalayıp doğrudan WordPress HTML düzenleyicinize eklemeniz yeterlidir.
Size verdiğimiz son tavsiye, SVG formatında kaydederken, Farklı çalışma yüzeyleriyle çalışıyorsanız, yalnızca etkin çalışma yüzeyinin tutulacağını unutmayın.
Daha ileri gitmek ve illüstrasyonumuza SVG efektleri uygulamak istiyorsak, Illustrator bize bir dizi efekt sunuyor. Bunu yapmak için bir nesne veya grup seçmemiz gerekecek. Efekt uygulamak için efekt penceresini, SVG filtrelerini seçmeli ve uygulamalıyız.
Bir SVG filtresi uygularken, tasarım programı bize bir pencere gösterir. Uygulanabilecek filtrelerin bir listesi görünür, birini seçtiğimizde, Illustrator bize nasıl göründüğünü gösterir, ancak rasterleştirilmiş bir sürümde.
Gördüğünüz gibi, SVG formatı bir devrim olmuştur. Potansiyeli ve kalitesi sayesinde sunduğu, söz konusu formatı doğru kullandığı sürece performanstan ödün vermeden çok daha çekici bulduğumuz web sayfalarını kılmaktadır. SVG, tasarım dünyası ve web geliştirme arasındaki mükemmel birlik haline geldi.