draw.io özel SVG şekilleri: Görsel mi, şablon mu?

draw.io'da özel bir SVG şekli kullanırken, ekledikten sonra neleri değiştirmek istediğinize karar verin. Çizimin görünümünü korumak istiyorsanız gömülü bir SVG görseli uygundur. Diyagram geometrisini, stilleri ve belirli bağlantı noktalarını tanımlamanın yolu ise yerel XML şekil şablonudur. Özel bir kitaplık, her iki tür öğeyi de yeniden kullanmak üzere saklayabilir.

Bu seçenekler farklı sorunları çözer. SVG'yi bir kitaplığa kaydetmek, tek başına yollarını yerel bir diyagram şekline dönüştürmez. draw.io özel şekil başvurusu, gömülü görseller ile kendi XML biçiminde tanımlanan şekilleri birbirinden ayırır.

Diyagramlarınızı Mermaid ile yazıyorsanız, etiketleri ve bağlantı çizgilerini diyagramın kaynak kodunda tutarak çizimi kaydetmek için özel SVG simge paketi iş akışını kullanın.

Çizimi dönüştürmeden önce davranışı seçin

Küçük bir cihaz simgesi düşünün: üzerinde bir dairesel gösterge bulunan dikdörtgen bir gövde. Bu simgeyi birkaç süreç diyagramında yeniden kullanmak istiyorsunuz.

Sunum amaçlı bir diyagramda cihazın tutarlı görünmesi yeterli olabilir. Bir bağlantı diyagramındaysa çizgilerin cihazın sol ve sağ kenarlarının orta noktalarına bağlanmasını isteyebilirsiniz. Başka bir dosya hazırlamadan önce bu gereksinimi yazın.

Görünümü yeterliyse SVG'yi görsel olarak ekleyin

Resmî SVG ekleme kılavuzu, bilgisayarınızdaki bir SVG dosyasını tuvale sürüklemeyi açıklar. Arrange → Insert → Image yolunu da kullanabilirsiniz. Sorulduğunda Actual Size seçeneğini seçin, ardından eklenen çizimi gerektiği gibi yeniden boyutlandırın.

Cihaz örneği için bir çalışma kopyası kullanın ve yeniden boyutlandırdıktan sonra küçük dairesel göstergeyi kontrol edin. Tam boyutta açıkça anlaşılabilen bir şekil, küçük bir diyagramda işe yarayan ayrıntılarını kaybedebilir.

Düzenlenebilir çizimin kaynak dosyasını ayrı tutun. Daireyi cihaz içinde taşımanız gerekiyorsa bu değişikliği kaynak düzenleyicide yapın ve kullanıma sunulan görseli değiştirin. SVG'nin birkaç görünür parça içermesi nedeniyle bir Ungroup komutu aramakla zaman kaybetmeyin. SVG nesneleri ve grubu çözme kılavuzumuz, dosyanın yapısının bu beklentiyi nasıl etkilediğini açıklar.

Bir diyagramın tamamını içeren sıradan bir SVG çizimi de dikkat gerektirir. Draw.io'nun ekleme kılavuzu, sıradan SVG'nin düzenlenebilir bir diyagramı yeniden oluşturmak için gereken bağlantı çizgisi bilgilerini taşımadığını açıklar. Elinizde varsa özgün diyagram dosyasını saklayın.

Gömülü SVG'nin rengini değiştirmek ek koşullar gerektirir

Draw.io, gömülü SVG çizimi ile renk kontrolleri arasında sınırlı bir bağlantı sunar. Gömülü SVG renk kılavuzu, SVG içindeki CSS kurallarını ve eklenen nesnenin stilindeki editableCssRules ayarını kullanır. Bu özellik gömülü görseller için geçerlidir; bağlantı yoluyla eklenen görseller için geçerli değildir.

Zaten CSS kurallarıyla yapılandırılmış bir SVG için eklenen görseli seçin, Edit Style seçeneğine tıklayın ve şunu ekleyin:

editableCssRules=.*;

Belgelenen bu ifade, uygun olan tüm kuralları seçer. SVG'nin çizim işaretlemesine yapıştırılacak bir satır değildir; draw.io nesnesinin stiline eklenmelidir.

Bu kontrolleri temel alarak bir kitaplık oluşturmadan önce ortaya çıkan kontrolleri inceleyin. İşe yarayan renk kontrolleri görünmüyorsa kaynak dosyayı resmî kılavuzdaki CSS sınıfı örneğiyle karşılaştırın. Bu ayarın herhangi bir SVG'deki boya özniteliklerini yeniden düzenleyeceğini, cihazın göstergesini ayıracağını veya bağlantı noktaları oluşturacağını varsaymayın.

Yalnızca tek bir kalıcı renk değişikliği gereken çizimlerde SVG kaynak dosyasını düzenlemek daha kolay olabilir. Bir kopya kaydedin ve içe aktarılan görünümü tekrar doğrulayın.

Bilinçli biçimde tanımlanmış bir şekil için yerel şablon kullanın

Yerel bir şekil şablonu, şekli draw.io'nun kendi XML sözdizimiyle tanımlar. Bu, uzantısı .xml olarak değiştirilmiş bir SVG dosyası değildir. Özel şekil öğreticisi, şekil düzenleyicisini açmak için Arrange → Insert → Shape, tanımı incelemek içinse Preview seçeneklerini kullanır.

Cihaz simgesi için küçük, özgün bir başlangıç örneği:

<shape name="two-port-device" w="100" h="60" aspect="fixed" strokewidth="inherit">
  <connections>
    <constraint x="0" y="0.5" perimeter="0" name="left"/>
    <constraint x="1" y="0.5" perimeter="0" name="right"/>
  </connections>
  <background>
    <rect x="0" y="0" w="100" h="60"/>
  </background>
  <foreground>
    <fillstroke/>
    <ellipse x="40" y="20" w="20" h="20"/>
    <stroke/>
  </foreground>
</shape>

Dış dikdörtgen ve ortadaki daire bilerek basit tutulmuştur. Koordinat değerleri bu çizimin çizim alanını tanımlar; cihazın fiziksel ölçüleri değildir.

XML başvurusu, göreli bağlantı koordinatlarını tanımlar. perimeter="0" kullanıldığında bu iki kısıt, noktaları sol ve sağ kenarların ortasına yerleştirir. Ayrıca arka plan geometrisinin boyama işleminin ön planın başında bulunmasını gerektirir; fillstroke öğesinin orada yer almasının nedeni budur.

Şekli önizleyin, bir deneme diyagramına ekleyin ve gerçekten ihtiyaç duyduğunuz davranışları deneyin:

1. Dolgu ve çizgi rengini değiştirin.
2. Hedeflenen her orta noktaya bir bağlantı çizgisi bağlayın.
3. Cihazı taşıyın ve iki bağlantıyı da inceleyin.
4. Yeniden boyutlandırın; daireyi, dış çizgiyi ve bağlantı çizgilerinin konumlarını kontrol edin.

Bu, uyarlayabileceğiniz küçük bir tanımdır; genel amaçlı bir SVG'den şekil şablonuna dönüştürücü değildir. Cihaz çiziminiz birçok dekoratif ayrıntı içeriyorsa hangilerinin diyagram simgesinde bulunması gerektiğine karar verin. Birkaç temel geometrik şekli yeniden çizmek, her konturu bir şablona taşımaktan daha kolay sürdürülebilir.

Öğenin kontrolleri tamamlandıktan sonra kitaplığı kaydedin

Kitaplık, yeniden kullanım adımıdır. Özel kitaplık kılavuzu, File → New Library yolunu, bir depolama konumu seçmeyi ve görsel eklemeyi ya da tuvalden şekilleri sürüklemeyi açıklar. Özel kitaplıklar .xml uzantısını kullanır.

Cihazı, içeriğini anlatan “Cihaz çizimi” veya “İki bağlantı noktalı cihaz” gibi bir adla kaydedin. Her ikisi de işinize yarıyorsa ayrı öğeler olarak saklayın.

Ardından yeni bir diyagram açın ve kaydedilen öğeyi ekleyin. Anlamlı bir düzenlemeyi tekrarlayın: yapılandırdıysanız çizimin rengini değiştirin veya yerel şekil şablonuna bir bağlantı çizgisi bağlayın. Böylece simgenizin eski bir sürümünü içeren kitaplıkları fark edebilirsiniz.

Yalnızca .xml dosya adına bakarak öğenin yerel geometri olup olmadığını anlayamazsınız. Hem kitaplık hem de şekil şablonu tanımı XML kullanır; ancak kitaplık görseller, gruplar, özel şekiller veya bütün diyagramlar içerebilir. Eklenen öğenin davranışını inceleyin.

Raster çizimi yalnızca vektör ana dosyası gerektiğinde kurtarın

Özgün cihaz çizimi yalnızca PNG veya tarama olarak kaldıysa PerfectVector'ın hazır çizimden SVG'ye dönüştürme iş akışı, aday bir çizim hazırlamanıza yardımcı olabilir. Bir kopyayı motife göre kırpın, vektör sonucunu önizleyin ve dış konturu, dairesel ayrıntıyı, boşlukları ve istenmeyen arka planı inceleyin. SVG'yi indirin ve görsel ekleme yöntemiyle deneyin.

Bu işlem, görünüm odaklı bir kaynak dosyayı incelemeniz için hazırlar. Cihazın sol ve sağ bağlantı noktalarını, bağlantı çizgilerinin anlamını veya yerel şekil şablonu XML'ini tanımlamaz. Diyagram bunları gerektiriyorsa ayrıca ve bilinçli olarak oluşturun.

Çok basit bir dikdörtgen ve daire simgesini doğrudan çizmek daha hızlı olabilir. Vektörleştirme, elinizde kalan çizimin korumak istediğiniz ayırt edici eğriler içerdiği durumlarda daha yararlıdır. Elle çizilmiş motifler için harita çizimi hazırlama kılavuzu, vektörleştirmeden önce çizimin temizlenmesini ele alır.

SVG büyütüldüğünde hâlâ pikselli görünüyorsa, SVG içindeki raster görseli tanılama kılavuzunu kullanarak gömülü bir bitmap içerip içermediğini kontrol edin. Görsel vektörleştirmeye genel bakış, pikselleri korumak ile şekilleri yeniden elde etmek arasındaki temel farkı açıklar.

Sık sorulan sorular

SVG'yi içe aktarmak onu yerel bir draw.io şekil şablonuna dönüştürür mü? Hayır. Görsel ekleme iş akışı çizimi gömer. Yerel bir özel şekil şablonu, geometri, stiller ve bağlantı noktaları için draw.io'nun XML şekil tanımını kullanır.

Gömülü bir SVG'nin renklerini değiştirebilir miyim? Draw.io, uygun SVG CSS kuralları ve eklenen nesnenin stilindeki editableCssRules ayarı aracılığıyla renk düzenlemeyi belgeler. Kaynak yapısını ve ekleme sonrasında sunulan kontrolleri kontrol edin.

Özel bir kitaplık SVG yollarını yerel şekillere dönüştürür mü? Kitaplık, görseller ve yerel özel şekiller dâhil olmak üzere yeniden kullanılabilir öğeleri saklar. Bir görseli kitaplığa kaydetmek, tek başına yerel geometri veya bağlantı çizgilerinin anlamsal bilgilerini eklemez.

PNG'yi vektörleştirmek diyagramım için bağlantı noktaları oluşturur mu? Hayır. Vektörleştirme, çizimin konturlarını yeniden elde edebilir. Gerektiğinde bağlantı noktalarını ve yerel diyagram davranışını ayrı olarak tanımlayın.

Kaynaklar

1. draw.io — Insert SVG images into a diagram — Görsel ekleme, boyutlandırma ve SVG'den diyagram bağlantı çizgilerini yeniden oluşturmanın sınırları.
2. draw.io — Create and edit complex custom shapes — Yerel XML geometrisi, bağlantı kısıtları ve çizim işlemleri.
3. draw.io — Edit colours in embedded SVG images — CSS kuralı düzenleme ve gömülü görseller ile bağlantılı görsellerin farklı gereksinimleri.
4. draw.io — Create custom shapes — Şekil şablonu düzenleyicisi, önizleme iş akışı ve varsayılan stiller.
5. draw.io — Work with custom shape libraries — Farklı türde kitaplık öğeleri oluşturma, kaydetme ve yeniden kullanma.

İhtiyacınız olan davranışı seçin, bir cihaz simgesi hazırlayın ve yeni bir diyagramda deneyin. Elinizde yalnızca raster çizim kaldıysa aday bir SVG hazırlayın, konturlarını inceleyin ve kitaplığınıza kaydetmeden önce eklenen görseli kontrol edin.