Kullanıcı Kılavuzu İptal

SVG

Vurgulama, araç ipuçları, ses ve animasyon gibi karmaşık efektlere sahip olan ve kullanıcı eylemlerine yanıt veren web grafikleri oluştururken XML ve JavaScript kullanmak için SVG ile çalışma hakkında daha fazla bilgi edinin.

SVG hakkında

SVG, görüntüleri şekiller, yollar, metin ve filtre efektleri olarak açıklayan bir vektör formatıdır. Oluşturulan dosyalar; GIF, JPEG, WBMP ve PNG dosyalarına göre çok daha küçüktü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 çiziminizde göründüğü şekilde görmesini sağlar.

SVG formatı tamamen XML tabanlıdır ve hem geliştiricilere hem de kullanıcılara benzer avantajlar sağlar. 

Kaydet, Farklı Kaydet, Kopyasını Kaydet veya Web ve Cihazlar için Kaydet komutlarını kullanarak çizimi SVG formatında kaydedebilirsiniz. SVG dışa aktarma seçeneklerinin tamamına erişmek için Kaydet, Farklı Kaydet veya Kopyasını Kaydet komutunu kullanın. Web ve Cihazlar için Kaydet komutu, SVG dışa aktarma seçeneklerinin Web'e yönelik çalışmalara uygulanabilecek bir alt kümesini sunar.

SVG efektleri uygulama

Çiziminize 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ır. 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, 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. Efekt uygulamak için aşağıdakilerden birini yapın:

    Varsayılan ayarları kullanılarak

    Efekt > SVG Filtreleri > SVG Filtresi Uygula seçeneğine gidin.

    Özel ayarlar kullanılarak

    1. Efekt > SVG Filtreleri > SVG Filtresi Uygula seçeneğine gidin.

    2. İletişim kutusunda ilgili efekti seçin ve ardından SVG Filtresini Düzenle   seçeneğini belirleyin. Varsayılan kodu düzenleyin ve Tamam'ı seçin.

    Yeni bir efekt oluşturma ve uygulama

    1. Efekt > SVG Filtreleri > SVG Filtresi Uygula seçeneğine gidin.

    2. İletişim kutusunda ilgili efekti seçin ve ardından Yeni SVG Filtresi   seçeneğini belirleyin. Yeni kodu girin ve Tamam'ı seçin.

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 (Saydamlık girişinin hemen ü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. Efektleri içe aktarmak istediğiniz SVG dosyasını seçin ve seçeneğini belirleyin.

SVG Etkileşimi paneline genel bakış

SVG Etkileşimi paneli, mevcut dosyayla ilişkilendirilmiş olan bütün olayları ve JavaScript dosyalarını görmenize de olanak verir.
Çiziminizi Web tarayıcısında görüntülenmek üzere dışa aktarırken 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 panelinden bir olayı silme

Bir olayı veya tüm olayları silmek için SVG Etkileşimi panelini kullanabilirsiniz.

Bir olayı silmek için

  • Olayı seçin ve Seçili Girişi Kaldır   seçeneğini belirleyin.

Tüm olayları silmek için

  • Panel menüsünden Olayları Temizle   seçeneğini belirleyin. 

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

JavaScript Dosyalarına Bağlantı Kur   seçeneğini belirleyin ve başka JavaScript dosyaları eklemek için Ekle seçeneğini, seçili JavaScript girişini kaldırmak için ise Kaldır seçeneğini belirleyin.

Çizime 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, fareye tıklatıldığında veya bir tuşa basıldığında eylemi tetikler.

onmousedown

Fare bir öğenin üzerindeyken farenin düğmesine basıldığında eylemi tetikler.

onmouseup

Fare bir öğenin üzerindeyken farenin düğmesi 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.

SVG dosyaları oluşturma hakkında ipuçları

  • SVG dosyasına yapı eklemek için katmanları kullanın. Çizimi SVG formatında kaydettiğinizde 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.

  • Raster verileri SVG Görüntüleyici'de ölçeklenemez ve diğer SVG öğeleri gibi düzenlenemez. SVG dosyasında rasterleştirilecek çizimler oluşturmaktan kaçınabilirsiniz. Rasterleştirmeye neden olmadan grafik efektler eklemek için SVG efektlerini kullanın.

  • SVG performansını artırmak için semboller kullanın ve çiziminizdeki 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.

Web için en iyileştirilmiş SVG dışa aktarma seçenekleri

Yeni SVG'yi Dışa Aktarma (Dosya > Dış Aktar > Farklı Dışa Aktar > SVG) seçeneği kullanılabilir. Yeni iş akışını kullanarak web ve ekran tasarımı projelerinizde standartlaştırılmış, web için optimize edilmiş SVG dosyaları oluşturabilirsiniz. Daha fazla bilgi için bkz. SVG dışa aktarma seçenekleri.


İlgili Kaynaklar

Bizimle iletişime geçin

Topluluğa Sorun

Sormak istediğiniz bir sorunuz veya paylaşacağınız bir fikriniz varsa Adobe Illustrator Topluluğu’na katılın. Görüşlerinizi almak isteriz.

Daha hızlı ve daha kolay yardım alın

Yeni kullanıcı mısınız?