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 vektör çizimi grupları dahil yapıştırır
Çizimin etrafına fazladan bir grup eklenmez: SVG'nin en üst düzeydeki şekilleri ve grupları, en üst düzeyde katmanlar olarak gelir. Dosyadan aktardığında en üst düzeydeki ilk grup dosyanın adını alır. Panodan yapıştırdığında ise çizim kendi gruplarını ve adlarını korur, tuvalin ortasına yerleşir ve seçili gelir.
Başka bir vektör uygulamasında kopyaladığın gruplar yine grup olarak ve aynı iç içe düzende gelir; yani yapıştırdığın şey fazladan katmanlara sarılmış olarak gelmez. Bazı uygulamalar panoya koydukları vektör kopyasına grupları eklemez. Windows'ta Celas Studio o zaman gruplamayı, bu uygulamaların panoda bıraktığı diğer kopyadan alır; yeter ki o kopya şekillerle birebir eşleşsin ve kırpma içermesin.
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.
Bazı vektör programları, içinde başka şekiller olan bir şekli üç parça hâlinde yazar: dolgusu, içindeki şekiller ve en üstte dış çizgisinin bir kopyası. Celas Studio bunları yeniden birleştirir. Dolgu ile dış çizgi tek bir Şekil katmanı olur, aradaki şekiller onun alt katmanları olur, dış çizgisinin Z Sırası da Ön yapılır; böylece dış çizgi aslındaki gibi en üstte kalır.
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. Yalnızca bir dönüşüm taşıyan, adı, kimliği ya da başka bir ayarı olmayan bir grup korunmaz: içeriği doğrudan grubun onu koyacağı yere yerleşir.
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.