SVG hakkında

Web için bit eşlem görüntü formatları (GIF, JPEG, WBMP ve PNG), görüntüleri bir piksel ızgarası kullanarak tanımlar. Ortaya çıkan dosyalar çoğu zaman büyük, (çoğunlukla düşük) tek bir çözünürlükle sınırlı olur ve Web'de büyük miktarda bant genişliği tüketir. Öte yandan SVG, görüntüleri şekiller, yollar, metin ve filtre efektleriyle tanımlayan bir vektör formatıdır. Ortaya çıkan dosyalar kompakttır ve Web'de, yazdırma sırasında, hatta sınırlı kaynaklara sahip avuç içi cihazlarda bile yüksek kalitede grafikler sunar. Kullanıcılar, ekrandaki SVG görüntüsünün görünümünü keskinlikten, ayrıntılardan veya netlikten ödün vermeksizin yakınlaştırabilirler. Ayrıca, SVG, üstün metin ve renk desteği sunarak, kullanıcıların görüntüleri, Illustrator resminizde göründüğü şekilde görmesini garantiler.

SVG formatı tamamen XML tabanlıdır ve hem geliştiricilere hem de kullanıcılara benzer avantajlar sağlar. SVG ile vurgulama, araç ipuçları, ses ve animasyon gibi sofistike efektlere sahip olan ve kullanıcı eylemlerine yanıt veren web grafikleri oluşturmak için XML ve JavaScript kullanabilirsiniz.

ResmiSVG formatında kaydetmek içinKaydet, Farklı Kaydet, Kopyasını Kaydet veya Web ve Aygıtlar İçin Kaydet komutunu kullanabilirsiniz. SVG dışa aktarma seçeneklerinin tamamına erişmek için, Kaydet, Farklı Kaydet veya Kopyasını Kaydet komutunu kullanın. Web ve Aygıtlar için Kaydet komutu, SVG dışa aktarma seçeneklerinin Web'e yönelik çalışmalara uygulanabilecek bir alt kümesini sunar.

Illustrator uygulamasında resmi nasıl düzenlediğiniz, ortaya çıkacak SVG dosyasını etkiler. Aşağıdaki kuralları aklınızda tutun:

  • SVG dosyasına yapı eklemek için, katmanları kullanın. Resmi SVG formatında kaydederken, her katman bir grup (<g>) öğesine dönüştürülür. (Örneğin, Button1 adındaki bir katman, SVG dosyasında <g id="Button1_ver3.0"> haline gelir.) İç içe katmanlar, iç içe SVG grupları haline gelir ve gizli katmanlar, SVG stil özelliği olan display="none" ile korunur.

  • Farklı katmanlardaki nesnelerin saydam görünmesini istiyorsanız, her katman yerine her nesnenin opaklığını ayarlayın. Opaklığı katman düzeyinde değiştirirseniz, ortaya çıkan SVG dosyası saydamlığı, Illustrator uygulamasında göründüğü şekilde görüntülemeyecektir.

  • Raster verileri SVG Görüntüleyici'de ölçeklenemez ve diğer SVG öğeleri gibi düzenlenemez. Mümkünse, SVG dosyasında rasterleştirilecek resimler oluşturmaktan kaçının. Degrade kafesler ve Rasterleştir, Sanatsal, Bulanıklaştır, Fırça Darbeleri, Deforme Et, Pikselleştir, Keskinleştir, Taslak, Stilize Et, Doku ve Video efektleri, SVG formatında kaydedilirken rasterleştirilir. Aynı şekilde, bu efektleri içeren grafik stilleri de rasterleştirmeye neden olur. Rasterleştirmeye neden olmaksızın grafik efektler eklemek için, SVG efektlerini kullanın.

  • SVG performansını artırmak için, semboller kullanın ve resminizdeki yolları basitleştirin. Ayrıca, performans öncelikliyse, Füzen, Ateş Külü ve Kaydırma Kalemi gibi çok miktarda veri üreten fırçaları kullanmaktan kaçının.

  • SVG dosyasına Web bağlantıları eklemek için dilimleri, görüntü eşlemlerini ve komut dosyalarını kullanın.

  • JavaScript gibi bir komut dosyası dili, SVG dosyalarına sayısız işlevler kazandırır. Fare işaretçisi ve klavye hareketleri, Rollover efektleri gibi işlevlerin komut işlevlerini harekete geçirebilir. Komut dosyaları, SVG dosyasına erişmek ve dosyayı değiştirmek (sözgelimi SVG öğeleri eklemek veya silmek) için de belge nesne modelini (DOM) kullanabilir.

SVG efektlerini uygulama

Resminize alt gölge gibi grafik özellikleri eklemek için SVG efektlerinden yararlanabilirsiniz. SVG efektleri, XML tabanlı olmaları ve çözünürlükten bağımsız olmalarıyla bit eşlem eşdeğerlerinden ayrılırlar. Aslında, bir SVG efekti, çeşitli matematik işlemlerini tanımlayan bir dizi XML özelliğidir. Ortaya çıkan efekt, kaynak grafiğe değil, hedef nesneye uygulanır.

Illustrator uygulaması varsayılan bir SVG efektleri kümesi sunar. Bu efektleri varsayılan özellikleriyle kullanabilir, özel efektler üretmek için XML kodunu düzenleyebilir veya yeni SVG efektleri yazabilirsiniz.

Not:

Illustrator uygulamasının varsayılan SVG filtreleri üzerinde değişiklik yapmak için bir metin düzenleyicisi¬kullanarak¬Documents and Settings/<kullanıcıdizini>/Application Data/Adobe/Adobe Illustrator <sürüm numarası> Settings/<konum> klasöründeki Adobe SVG Filters.svg dosyasını düzenleyin. Mevcut filtre tanımları üzerinde değişiklik yapabilir, filtre tanımlarını silebilir ve yeni filtre tanımları ekleyebilirsiniz.

  1. Nesne veya grup seçin (veya Katmanlar panelinde bir katmanı hedefleyin).
  2. Aşağıdakilerden birini yapın:
    • Efekti varsayılan ayarlarıyla uygulamak için Efekt > SVG Filtreleri alt menüsünün en alt bölümünden efekti seçin.

    • Efekti özel ayarlarla uygulamak için Efekt > SVG Filtreleri > SVG Filtresi Uygula öğesini seçin. İletişim kutusunda efekti seçin ve SVG Filtresini Düzenledüğmesini tıklatın.Varsayılan kodu düzenleyip Tamam düğmesini tıklatın.

    • Yeni bir efekt oluşturmak ve uygulamak için Efekt > SVG Filtreleri > SVG Filtresi Uygula öğesini seçin. İletişim kutusunda, Yeni SVG Filtresi düğmesini ve yeni kodu girin ve Tamam öğesini tıklatın.

      SVG filtresi efektini uyguladığınızda Illustrator uygulaması çalışma yüzeyinde, efektin rasterleştirilmiş bir sürümünü görüntüler. Belgenin rasterleştirme çözünürlük ayarlarını değiştirerek, bu önizleme görüntüsünün çözünürlüğünü kontrol edebilirsiniz.

      Not: Nesnede birden çok efekt kullanıldığında, SVG efektinin kullanılan en son efekt olması gerekir; başka bir deyişle, efekt Görünüm panelinin en altında (hemen Saydamlık girişinin üstünde) yer almalıdır. SVG efektini izleyen başka efektler varsa SVG çıktısı bir raster nesnesinden oluşacaktır.

Efektleri SVG dosyasından içe aktarma

  1. Efekt > SVG Filtresi > SVG Filtresini İçe Aktar öğesini seçin.

  2. İçinden efektleri içe aktarmak istediğiniz SVG dosyasını seçin ve düğmesini tıklatın.

SVG Etkileşimi paneline genel bakış

Resminizi web tarayıcıda görüntülemek üzere dışa aktarırken resme etkileşim eklemek için SVG Etkileşimi panelini (Pencere > SVG Etkileşimi) kullanabilirsiniz. Örneğin, bir JavaScript komutunu tetikleyen bir olay oluşturarak, kullanıcı fareyi bir nesnenin üstüne getirmek gibi bir eylem yaptığında Web sayfasında kolayca bir hareket oluşturabilirsiniz. SVG Etkileşimi paneli ayrıca, mevcut dosyayla ilişkilendirilmiş olan bütün olayları ve JavaScript dosyalarını görmenize de olanak verir.

SVG Etkileşimi panelinden olay silme

  • Bir olayı silmek için olayı seçin ve Sil düğmesini tıklatın veya panel menüsünden Olayı Sil öğesini seçin.
  • Bütün olayları silmek için panel menüsünden Olayı Temizle öğesini seçin.

Dosyaya bağlı olayları listeleme, ekleme veya kaldırma

  1. JavaScript Dosyalarına Bağlantı Kur düğmesini tıklatın.
  2. JavaScript Dosyaları iletişim kutusunda bir JavaScript girişi seçin ve aşağıdakilerden birini yapın:
    • Başka JavaScript dosyaları bulmak için Ekle düğmesini tıklatın.

    • Seçilen JavaScript girişini kaldırmak için Kaldır düğmesini tıklatın.

Resme SVG etkileşimi ekleme

  1. SVG Etkileşimi panelinde bir olay seçin. (Bkz. SVG olayları.)

  2. İlgili JavaScript dosyasını girin ve Enter tuşuna basın.

SVG olayları

onfocusin

Fare işaretçisiyle seçim gibi, bir öğe odağa geçtiğinde, eylemi tetikler.

onfocusout

Öğe odaktan çıktığında (çoğunlukla başka bir öğe odağa geçtiğinde) eylemi tetikler.

onactivate

SVG öğesine bağlı olarak fare tıklatması veya bir tuşa basılmasıyla eylemi tetikler.

onmousedown

Fare düğmesine bir öğenin üstündeyken basıldığında eylemi tetikler.

onmouseup

Fare düğmesi bir öğenin üstündeyken bırakıldığında eylemi tetikler.

onclick

Öğenin üstündeyken fare tıklatıldığında eylemi tetikler.

onmouseover

Fare işaretçisi bir öğenin üstüne getirildiğinde eylemi tetikler.

onmousemove

Fare işaretçisi bir öğenin üstünde olduğu sürece eylemi tetikler.

onmouseout

Fare işaretçisi bir öğeden dışarı hareket ettirildiğinde eylemi tetikler.

onkeydown

Bir tuşa basıldığında eylemi tetikler.

onkeypress

Bir tuş basılı olduğu sürece eylemi tetikler.

onkeyup

Bir tuş bırakıldığında eylemi tetikler.

onload

SVG belgesi tarayıcı tarafından tamamen ayrıştırıldıktan sonra eylemi tetikler. Bu olayı, sadece bir kerelik başlatma işlevlerini çağırmak için kullanın.

onerror

Öğe düzgün şekilde yüklenmediğinde veya başka bir hata ortaya çıktığında olayı tetikler.

onabort

Öğe tamamen yüklenmeden önce sayfanın yüklenmesi durdurulduğunda olayı tetikler.

onunload

SVG belgesi bir pencereden veya çerçeveden kaldırıldığında eylemi tetikler.

onzoom

Belgenin yakınlaştırma düzeyi değiştirildiğinde eylemi tetikler.

onresize

Belge görünümü yeniden boyutlandırıldığında eylemi tetikler.

onscroll

Belge görünümü dikey veya yatay olarak kaydırıldığında eylemi tetikler.

Web için optimize edilmiş SVG dışa aktarma seçenekleri

Yeni SVG'yi Dışa Aktarma (Dosya > Dışa Aktar > SVG) seçeneğinden yararlanabilirsiniz. Yeni iş akışını kullanarak web ve ekran tasarımı projelerinizde standartlaştırılmış, web için optimize edilmiş SVG dosyaları oluşturabilirsiniz.

Mevcut seçenekler şunlardır:

  • Stil Uygulama. Elde edilen kodun SVG dosyasına nasıl yazılacağını seçin. Dahili CSS, Satır İçi Stil veya Sunum Nitelikleri stillerinden birini tercih edin.
  • Font. Fontların SVG dosyasında nasıl görüneceğini seçin. Ana hatlar yol tanımını korurveen uyumlu olanlardır.
  • Görüntüler: Görüntülerin belgeye gömülü olarak mı yoksa belgeye harici olarak verilen bağlantılı dosyalar olarak mı kaydedileceğini belirleyin.
  • Nesne Kimlikleri: Kimlik türlerinin (adlar) SVG dosyasındaki nesnelere nasıl atanacağını seçin. Katman Adları, Minimal veya Benzersiz arasından tercih yapın. Bu seçenekle, nesnelerin yinelenen adlarının nasıl kullanılacağı ve nesnelerin dışa aktarılan CSS dosyasında nasıl adlandırılacağı belirlenir.
  • Ondalık: Nesne konumlarının doğruluğu hakkında ne kadar bilgi saklamak istediğinizi seçin. Yüksek Ondalık değer, nesnelerin mizanpaj doğruluğunu artırır; böylece, SVG görsel olarak aslına çok uygun şekilde taranır. Ancak, Ondalık değerin artırılması dışa aktarılan SVG'nin dosya boyutunun da büyümesine neden olur.
  • Küçült: Boş grupları ve boş alanları kaldırarak SVG'nin dosya boyutunu en iyi şekilde ayarlar. Bu seçeneği belirlediğinizde, elde edilen SVG kodunun okunabilirliği de azalır.
  • Uyumlu. Bu seçenek işaretlendiğinde oluşturulan SVG'nin bir tarayıcıda ölçeklenmesi sağlanır. Hiçbir mutlak boyut değeri yazılmaz.
  • Kodu Göster: Dışa aktarılan içeriği varsayılan metin düzenleyicinizde açar.
  • Tarayıcıda göster (simge): Görüntüyü varsayılan web tarayıcınızda gösterir.

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi