Excalidraw'a SVG aktarma: Neler düzenlenebilir?

Bir SVG'yi Excalidraw'a sürükleyip bırakmak, tek tek yollarını düzenlemenize izin vermeden net, yeniden boyutlandırılabilir bir görsel elde etmenizi sağlayabilir. Bir parçanın rengini değiştirmek veya onu taşımak istiyorsanız, Excalidraw'ın kendi öğelerinden oluşan bir sahneye ihtiyacınız vardır. Bir SVG-to-Excalidraw dönüştürücüsü bu öğeleri oluşturabilir, ancak sonuç yine de görsel olarak kontrol edilmelidir. Excalidraw'daki SVG içe aktarma tartışması, tam olarak bu tek nesne ile düzenlenebilir parçalar arasındaki sorunu anlatır.

Şeffaf bir boşluk içeren küçük, iki renkli bir simgeyi test ettik. Sürümü sabitlenmiş bir dönüştürücü, seçilebilir üç Excalidraw öğesi üretti; ancak SVG'de açık olan boşluğu doldurdu. Bu, yararlı bir hatırlatmadır: düzenlenebilirlik ve aslına uygunluk ayrı ayrı kontrol edilmelidir.

“Excalidraw'da SVG” üç farklı anlama gelebilir

Üçüncü durum ters yönde ilerler. Bir araç, kendi çiziminin düzenlenmek üzere yeniden açılabilmesi için Excalidraw kaynak verilerini SVG dışa aktarımının içine koyabilir. Örneğin Excalidraw VS Code eklentisi, gömülü sahne verileri içeren .excalidraw.svg dosyalarını belgeler. Bu, herhangi bir SVG illüstrasyonunun zaten Excalidraw şekilleri içerdiği anlamına gelmez.

İçe aktarılan bir grafiğin grubu çözülemiyorsa, önce seçilen nesnenin yapısını belirleyin. SVG gruplarını çözme rehberimiz, görsel nesnelerini, bileşik yolları ve gerçek grupları birbirinden ayırır; Excalidraw, bu kaynak dosyası meselesine kendi sahne biçimini de ekler.

Yalnızca SVG'nin yollarını düzenlemeniz gerekiyorsa, Boxy SVG vektörleştirme veya içe aktarma kontrollerini izleyin ve bir ana SVG dosyası saklayın. Excalidraw'ın kendi sahne öğelerine ihtiyacınız olduğunda Excalidraw sahnesine dönüştürün.

Küçük bir dönüşüm testi: Şekiller korundu, boşluk korunmadı

Kaynağımız elle yazılmış bir SVG idi: even-odd bileşik yoldan oluşan bir turkuaz halka ve altın renkli bir daire. Halkanın ortası özgün dosyada gerçekten şeffaftı; beyaza boyanmamıştı. Bunu, npm paketinin 0.0.2 sürümüyle resmi svg-to-excalidraw deposundan geçirdik, döndürülen sahneyi .excalidraw dosyası olarak kaydettik, dosyayı Excalidraw'da açtık ve karşılaştırma için şeffaf bir PNG dışa aktardık.

Özgün kaynak ve dönüştürülmüş sahne

Dönüşüm hiçbir hata bildirmedi ve Excalidraw'ın kendi biçiminde üç öğe oluşturdu: iki turkuaz çizim öğesi ve bir altın renkli elips. Altın renkli vurgu parçası ayrı olarak seçilebiliyordu. Ancak şeffaf merkez, görünüm kontrolünü geçemedi. Özgün işlenmiş görüntüde merkez piksel şeffaftı; Excalidraw'ın şeffaf PNG dışa aktarımında karşılık gelen piksel opak turkuazdı. Hatasız bir dönüşüm yanıtı, eşleşen bir görüntüyü garanti etmedi.

Bu, bilerek dar kapsamlı tutulan tek bir testtir; her SVG veya her dönüşüm yolu hakkında bir iddia değildir. Ayrı bir çalışma olan SVG Chop deneyi de karmaşık SVG yapılarını bir dönüşüm zorluğu olarak ele alır. Nesne sayısına hızla bakmak yeterli değildir. Tasarımınızda kullanılıyorsa boşluklar, maskeler, kırpma, renk geçişleri, metin ve iç içe gruplar ayrıca test edilmelidir.

Kendi SVG'nizi nasıl kontrol edebilirsiniz?

1. Özgün SVG'yi saklayın. İçe aktarmadan veya dönüştürmeden önce bir kopya kaydedin. Değiştirmek istediğiniz bölgenin zaten ayrı bir yol veya şekil olup olmadığını inceleyin. Tek bir bileşik yol, ayrı seçilebilir parçaları olmadan da bir boşluk içerebilir.
2. Bu çizim için “düzenlenebilir” olmanın ne anlama geldiğine karar verin. İllüstrasyonu yalnızca ölçeklendirmek ve konumlandırmak istiyorsanız bir görsel yeterli olabilir. Bir parçayı taşımak veya yeniden renklendirmek istiyorsanız o parçanın Excalidraw'ın kendi biçiminde bir sahne öğesi olarak bulunması gerekir.
3. Dönüşüm yolunu bir kopyada deneyin. Açık kaynaklı SVG-to-Excalidraw projesi, SVG geometrisini Excalidraw sahne içeriğine dönüştürür. Güncel kurulumunu kontrol edin ve kullandığınız paket sürümünü kaydedin. Sıradan bir görsel yerleştirmenin yolları erişilebilir kılacağını varsaymak yerine, ortaya çıkan sahneyi içe aktarın veya açın.
4. Parçaları sayın ve seçin. Vurgu parçasını gövdeden ayrı seçebiliyor musunuz? Diğer renk değişmeden onun rengini değiştirebiliyor musunuz? Kaydedilen sahneyi yeniden açıp düzenlemeyi tekrarlayın.
5. Yalnızca nesneleri değil, görüntüyü de karşılaştırın. Özgün görseli ve Excalidraw dışa aktarımını kontrast oluşturan arka planların üzerine yerleştirin. Boşlukları, örtüşmeleri, kenarları, metni ve ihtiyaç duyduğunuz efektleri inceleyin. Testimiz bir “üç öğe” kontrolünü geçerdi, ancak burada başarısız oldu.

Dönüşüm, tek parça olması amaçlanan bir bölümü çok sayıda çizim öğesine ayırıyorsa, gruplama onu taşımayı kolaylaştırabilir; ancak özgün yol yapısını geri getirmez. Bir boşluk kayboluyorsa kaynağı düzenleyin veya o grafik için başka bir düzenleyici kullanın. Excalidraw ihtiyaç duyduğunuz bir özelliği koruyamıyorsa, düzenlenebilir ana dosyayı vektör düzenleyicide tutun.

PerfectVector bu süreçte nerede yer alır?

PerfectVector, iş akışının daha erken bir aşamasında yalnızca kaynak raster grafik olduğunda yardımcı olur; örneğin henüz SVG yolları bulunmayan düz renkli bir PNG simgesi için. İllüstrasyonu SVG'ye dönüştürün, renkli bölgelerin ve negatif alanın korunup korunmadığını inceleyin ve Excalidraw dönüşümünü denemeden önce geometriyi temizleyin. Küçük simge hazırlama rehberi, kaynağın netliğini ve tutarlılığını ele alır. Vektörleştirme, Excalidraw'a görsel olarak yerleştirilmiş bir nesneyi tek başına Excalidraw'ın kendi sahne öğelerine dönüştüremez; yeni vektörleştirilmiş bir SVG de yukarıdaki hedef uygulama kontrolünden geçmelidir.

Zaten uygun vektör şekilleri içeren bir SVG'yi yeniden vektörleştirmeyin. Bunun yerine özgün dosyayı dönüştürülmüş sahneyle karşılaştırın. İlgili draw.io özel SVG şekil rehberi, farklı bir diyagram düzenleyicisi için benzer bir görsel ile uygulamanın kendi şekilleri arasındaki ayrımı yapar.

Sık sorulan sorular

Yerleştirilmiş bir SVG görselinin grubunu çözüp Excalidraw şekilleri elde edebilir miyim? Görsel düzeyinde bir seçim, özgün SVG parçalarını Excalidraw'ın kendi öğeleri olarak erişilebilir kılmaz. Ayrı sahne şekillerine ihtiyacınız olduğunda bir dönüşüm iş akışı kullanın, ardından sonucu inceleyin.

SVG-to-Excalidraw dönüşümü her boşluğu korur mu? Koruduğunu varsaymayın. 0.0.2 sürümüyle yaptığımız testte even-odd halka, düzenlenebilir çizim öğelerine dönüştü; ancak şeffaf merkezi doldu. Özellikle boş alanın önemli olduğu yerlerde kendi kaynağınızı ve kaydedilen sahneyi karşılaştırın.

Bir SVG'yi içe aktarmadan önce vektörleştirmeli miyim? Hayır. SVG zaten ihtiyaç duyduğunuz şekilleri içeriyorsa, yapısını ve Excalidraw dönüşümünü kontrol edin. Vektörleştirme, başlangıç görseliniz PNG veya JPG gibi raster grafik olduğunda anlamlıdır.

Kaynaklar

1. Excalidraw discussion #6082 — İçe aktarılan bir SVG'nin düzenlenebilir parçalar yerine tek bir blok gibi davranmasına ilişkin kullanıcı sorusu.
2. Excalidraw — svg-to-excalidraw — Özgün simgeyle yapılan, sürümü sabitlenmiş testte kullanılan resmi açık kaynaklı dönüşüm yolu.
3. Excalidraw Editor extension for VS Code — Excalidraw sahne dosyalarını ve gömülü sahne verileri içeren SVG/PNG dışa aktarımlarını belgeler.
4. Minixcali — SVG Chop — Geometriye ilişkin sınırlamalarla birlikte SVG parçalarını Excalidraw öğelerine dönüştüren bağımsız deney.

Başlangıç noktanız bir PNG simgesiyse, PerfectVector ile bir aday SVG oluşturun, ayrı bölgelerini ve boşluklarını kontrol edin, ardından bir çizimde kullanmadan önce kaydedilen Excalidraw sahnesini test edin.