SVG içe aktarma
Illustrator, Affinity Designer, Inkscape ya da Figma'dan gelen vektör çizimleri düzenlenebilir Şekil katmanı olarak getirmek; bir de yolda kaybolan SVG özellikleri.
SVG dosyası burada gerçek geometriye dönüşür. Yollar, çizimin resmi olarak değil; Düğüm Aracı'yla düzenleyebileceğin çapaları ve tutamakları olan Şekil katmanları olarak gelir. Dosyadaki gruplar da Katmanlar panelinde grup olur.
İçeri almanın dört yolu var ve hepsi aynı okuyucuyu çalıştırır:
- Dosya ▸ İçe Aktar ▸ SVG… açık projeye aktarır
- SVG seçiliyken Dosya ▸ Aç… onun etrafında adsız yeni bir proje kurar
- Dosyayı tuvale bırakmak aktarır; başka bir yere bırakmak yeni proje olarak açar
- Ctrl+V, başka bir uygulamadan kopyaladığın SVG kodunu yapıştırır
Dosyadan aktardığında üst grup dosyanın adını alır. Panodan yapıştırdığında ise adı SVG olur.
Ne neye dönüşür
| SVG'de | Celas Studio'da |
|---|---|
| g, a ve iç içe svg | Grup katmanı |
| path, rect, circle, ellipse, polygon, polyline, line | Her biri için ayrı bir Şekil katmanı |
| image | Görsel katmanı |
| linearGradient, radialGradient | Onu kullanan şeklin dolgusunda ya da konturunda gradyan |
| text | İlk birkaç karakterle adlandırılmış, boş bir yer tutucu katman |
Eliptik yaylar dahil bütün yol komutları anlaşılır ve hepsi kübik Bezier eğrilerine çevrilir. Bileşik yollar (O harfi, simit, deliği olan her şey) iç konturlarıyla birlikte tek bir Şekil katmanı olarak kalır. Böylece delik yerinde durur ve şeklin tamamı tek nesne olarak düzenlenebilir.
Dolgular, dolgu kuralı, konturlar, kontur kalınlığı, uç ve birleşim biçimleri, opaklık ve gradyanlar olduğu gibi gelir. Kontur kalınlığı çizimle birlikte ölçeklenir, yani çizgi kalınlığı doğru görünür. Dosyada gizli işaretlenmiş her şey de gizli gelir.
Renkler, çizim modelinin kullandığı bütün CSS biçimlerinde okunur: renk adları, #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb() ve rgba(). Sayısal biçimlerde yüzde de kabul edilir. Dört ve sekiz haneli onaltılık yazımlar alfa değerini de taşır.
rx değeri ry'den farklı olan yuvarlatılmış bir rect, gerçekten eliptik köşelerle gelir. rx ile ry eşitse şekil düz bir dikdörtgen olarak kalır ve köşe yarıçapını bir değer olarak taşır; böylece Düğüm Aracı'nın köşe yarıçapı tutamağı üzerinde çalışmaya devam eder.
Bağlantılı bir <image>, SVG'nin kendi klasörüne göre çözümlenir; yani yanındaki bir dosyaya başvuran çizim sorunsuz yüklenir. Gömülü data: URI'leri de doğrudan çözülür.
Gruplar dönüşüm taşımaz
Dosyadaki dönüşümler doğrudan çizimin geometrisine işlenir. Bu yüzden eline geçen gruplar saf yapıdır; kendilerine ait dönme ya da ölçek değerleri yoktur. Çizim, dosyanın söylediği yere birebir oturur; grubu sonradan döndürsen ya da ölçeklesen de altında bir şey kaymaz.
Desteklenmeyenler
Okuyucu SVG standardının tamamını değil, çizim modelini kapsar. Aşağıdakiler uyarı verilmeden atlanır.
- CSS stil blokları ve class öznitelikleri: aşağıdaki uyarıya bak
- use ve symbol: sprite sayfaları ve tekrarlanan örnekler boş gelir
- clipPath ve mask: kırpma uygulanmaz, kırpılıp gizlenmiş çizim ortaya çıkabilir
- pattern dolgular; bunlar düz griye döner
- filter efektleri: bulanıklık, gölge ve diğerleri
- marker: ok başları ve çizgi uçları
- stroke-dasharray ve stroke-dashoffset; kesikli konturlar düz gelir
- switch, foreignObject ve SMIL animasyonu
- Metin: yazı tipi, boyut ve konum kaybolur, geriye yalnızca adlandırılmış bir yer tutucu katman kalır
- Yüzde ve göreli birimler; bir de style özniteliğinin içine yazılmış dönüşümler
Sorunsuz aktarılan dosya nasıl hazırlanır
- Dışa aktarmadan önce metni anahatlara çevir; metin buraya yalnızca yer tutucu olarak gelir.
- Korumak istediğin konturları, kesik çizgileri, desenleri ve filtre efektlerini genişlet.
- Kırpma maskelerini serbest bırak ya da çizimi görünmesi gereken kısma kırp.
- Sembolleri ve tekrarlanan örnekleri genişlet ki hiçbir şey use öğesine bağlı kalmasın.
- CSS yerine sunum öznitelikleriyle dışa aktar ve belgeye bir viewBox ver.
Boyut ve yerleşim
Belgenin genişliği ve yüksekliği piksel, punto, pika, inç, milimetre ya da santimetre cinsinden okunur ve çizimi düzgün ölçeklemek için viewBox ile birleştirilir. Yüzdeyle boyutlandırılmış dosyalar (web logolarındaki alışıldık "width=100%" durumu) gerilmek yerine viewBox boyutunda gelir. Çizim en sonunda tuvalinin ortasına yerleştirilir.