SVG Kalıpları Nasıl Dışa Aktarılır

Eskiden 72dpi'de tifleyebilen bir görüntüyü bir gif veya jpg olarak atabilir ve CSS ile döşeyebilirsiniz. Web tasarımcıları arasında yaygın bir uygulamadır ve yıllardır olmuştur; İşinize desen veya doku eklemenin hızlı ve kolay bir yoludur. Sonra, Apple'daki sinir bozucu vücutlar, retina ekranlarını yayınladı ve biz bunu bilmeden önce piksel bir piksel değildi artık. Aniden bu sevilen kalıplar tarih oldu.

SVG'ler (Ölçeklenebilir Vektör Grafikleri) hızla Web’deki canlı grafikler için standart haline geliyor. Retina cihazlarına uyum sağlamak için ayrı görüntü dosyaları oluşturmanın problemini çözer. Gerçekten çok eğlenceli ve kolay yaratılırlar ve bir olasılıklar dünyası açarlar…

1. Adım: Desen oluştur

Bir SVG kalıbı tasarlamanıza izin verecek düzinelerce farklı uygulama vardır. Benim favorim Illustrator, yani kullanacağım şey bu.

Adobe Illustrator uygulamasını açın ve 300px by 300px olan yeni bir belge oluşturun. Ardından, Nesne> Desen> Yap seçeneğine gidin ve tuvaliniz değişecektir. Çalışma yüzeyinizin ortasında mavi bir kare olacağını fark edeceksiniz. Ayrıca, Desen Seçenekleri Paneli açık olacaktır.

Başlamadan önce hafif bir ayarlama yapmamız gerekecek. Desen Seçenekleri Paneli'ne gidin ve Çini Sanatla Taşı yazan seçeneğin işaretini kaldırın . (Bu özellik can sıkıcıdır, çünkü resminizi desen karesi içinde taşıyamaz veya konumlandıramazsınız. Bu seçeneğin işaretini kaldırmazsanız, onunla birlikte hareket edecektir.)

Ardından, gökyüzü hangi tür desen oluşturabileceğinizin sınırıdır. Varsayılan olarak, desen karesi 100 piksel x 100 piksel olarak ayarlanmıştır. İstediğiniz boyutta arama yapabilirsiniz. Benimki varsayılan olarak bıraktım.

Ardından, 50 piksel x 50 piksel olarak bir kare çizin. Karenin üst ve sağ kenarlarıyla hizalayın.

Ardından, farenizi Kalem Aracı üzerine tıklayın ve basılı tutun. Bağlantı Noktası Ekle Aracı'nı seçebileceğiniz alt araçlar görünecektir. Buradan, meydanın sol ve sağ taraflarının merkezine bir çapa noktası ekleyin.

Doğrudan Seçim Aracı'nı kullanarak, bağlantı noktalarını seçin (her ikisini de seçmek için kaydırma tutun). Ardından, üst menüden Nesne> Dönüştür> Taşı'yı seçin.

Bir tür ok oluşturmak için 20px'lik iki noktayı sağa hareket ettirin.

Ardından, alt tuşunu basılı tutarken şekli yeni bir konuma sürükleyerek şekli çoğaltın. (Ya da isterseniz kopyalayıp yapıştırın .)

Yeni şekli seçin ve desen karesinin sol alt köşesine sürükleyin.

Hâlâ seçiliyken, bir köşe alın ve 180 derece döndürün. (Tam olarak 180 dereceye kadar geçmek için vites tuşunu basılı tutun.)

Üst menüden Nesne> Dönüştür> Taşı'yı seçin ve yeni şekli -20px taşıyın.

Son olarak, pencerenin üstündeki Kopyala Kaydet düğmesini tıklayın, deseni adlandırın ve deseninizi tamamlamak için kaydedin. Daha sonra düzenlemek istiyorsanız bir Kopyasını Kaydetmek önemlidir. Bu sizi tekrar tekrar yaratmak zorunda kalmanıza engel olur.

2. Adım: Kalıbı dışa aktarın

Desen modundan çıktığınızda desenin dolgunuz olarak otomatik olarak seçildiğini fark edersiniz. Yapmanız gereken tek şey, çalışma yüzeyinde bir şekil çizmek ve desenle doldurulacak. (Herhangi bir nedenle şekil üzerindeki dolguyu değiştirdiyseniz, deseninizi renk örnekleri panelinde bulabilir, başka bir dolgu gibi kullanabilirsiniz.)

Ardından, şeklinizi yeniden boyutlandırın ve 300px by 300px çalışma yüzeyini kapsayacak şekilde yeniden boyutlandırın.

Dosya> Farklı Kaydet'i seçin . Dosyanızı .svg olarak kaydedin.

Ardından, farklı SVG biçimleri ve seçeneklerinden seçim yapabileceğiniz bir iletişim kutusu görünecektir. SVG dosyanızın tüm mevcut seçeneklerini görmek için sol alt köşedeki diğer seçenekleri tıkladığınızdan emin olun.

Tipik format SVG 1.1'dir, çünkü en yaygın kullanılan ve en yaygın olarak desteklenen SVG formatıdır. Bu kutuda ayrıca, Illustrator'da SVG'yi düzenleme yeteneğini veya bir yoldaki metni etkinleştirip etkinleştirmediğinizi, hangisinin kullanışlı olabileceğini de kontrol edersiniz. SVG'yi gerçek bir dosya olarak kullanma seçeneğiniz vardır veya kodu kopyalayıp doğrudan html belgenize yapıştırabilirsiniz. Bitirdikten sonra Tamam'a tıklayın .

3. Adım: SVG kalıbını düzenleyin

Bir metin düzenleyicisinde .svg dosyasını açın. Sublime Text kullanıyorum, ancak Not Defteri, Dreamweaver veya HTML kodunu yazdığınız her şeyi kullanabilirsiniz.

Aynı dosyayı bir tarayıcıda açın, böylece kodda yaptığınız değişiklikleri önizleyebilirsiniz.

Odaklanmak için birkaç farklı alan var. İlk olarak, SVG dosyasının sınırlarını düzenlememiz gerekiyor, böylece tarayıcıyı dolduracak.

Göreceksin: altta. Bunun yerine her iki değeri de 300 ila% 100 değiştirin. Yani kodunuz şöyle görünecek:

Henüz bir değişiklik fark etmemelisin. Hala bir kare olmalı. Niye ya? Görüntüleme kutusu, kare boyutları olan 300 x 300 olarak ayarlandığından. Tarayıcının genişliğini ve yüksekliğini doldurmak için, viewBox = ”0 0 300 300 ″ ' den viewBox =" 0 0 100% 100% " satır 4'teki kodu değiştirin.

Tarayıcıyı yenilediğimizde, desen tarayıcımızı uçtan uca doldurur. Sorun şu ki, desenin boyutunu değiştirmek isterseniz ne olur? Illustrator'a geri dönüp her şeyi yeniden mi yapıyorsun? Hayır. Bu, Illustrator uygulamasının SVG kodunuzu oluşturmasının güzelliği. Kodu kolayca düzenleyebilirsiniz. Bunu tamamen bir grafik dosyası olarak düşünmeyin. Bunu, iradenizi manipüle edip bükebileceğiniz bir kod dosyası olarak düşünün.

Desenin boyutunu düzenlemek için on line 5. Genişlik ve yükseklik değerlerini istediğiniz herhangi bir şeye değiştirin. Deseni bozmak istemediğiniz sürece bunu kare oranlarda tutmanızı öneriyorum. Değerleri 70 olarak değiştirdiğimde, model daha küçüktür, ancak yine de genişliğini ve yüksekliğini ekrana doldurur.

Kodlara bakarsanız, desenin çokgenlerden oluştuğunu görürsünüz. İlk çokgen bir “yok” dolgusu (beyaz üretir) ve diğerlerinin de onaltılık değerleri vardır.

Bizim desenimizin renklerini değiştirmek için tek yapmamız gereken dolgu değerlerini değiştirmek.

Kopyalayıp yapıştırmayı seven bir kişi iseniz, işte son SVG kodumuz:

Bu kesinlikle geçerli, ama biraz dağınık (teşekkürler Illustrator). Bu yüzden, kullanmadan önce optimize etmenizi öneririm. Mevcut birçok optimizasyon seçeneği vardır, ancak Peter Collingridge’in en iyilerinden biridir, bize bu son kodu verir:

Sonuç

Illustrator renk örnekleri ve desenlerinizi SVG olarak dışa aktarma özelliğine sahip olmak çok çeşitli olasılıklar sunar. Sadece bir SVG kalıbı oluşturamaz, dosyayı birkaç dakika içinde düzenleyebilir, renkleri, boyutları ve dosyanın tarayıcıda nasıl işlendiğini kontrol edebilirsiniz.