รูปทรง SVG กำหนดเองใน draw.io: ภาพหรือ Stencil?

สำหรับรูปทรง SVG กำหนดเองใน draw.io ให้ตัดสินว่าต้องเปลี่ยนอะไรหลังใส่ ภาพ SVG ที่ฝังมีประโยชน์เมื่อต้องการรูปลักษณ์งานภาพ stencil XML ในตัวเป็นวิธีกำหนดรูปทรงแผนภาพ รูปแบบ และจุดเชื่อมต่อเฉพาะ ไลบรารีกำหนดเองเก็บรายการได้ทั้งสองชนิดเพื่อใช้ซ้ำ

ตัวเลือกเหล่านี้แก้ปัญหาต่างกัน การบันทึก SVG ในไลบรารีเพียงอย่างเดียวไม่เปลี่ยนพาธเป็นรูปทรงแผนภาพในตัว เอกสารอ้างอิงรูปทรงกำหนดเองของ draw.io แยกภาพฝังกับรูปทรงที่นิยามด้วย XML ของมัน

หากเขียนแผนภาพใน Mermaid ใช้ ขั้นตอนชุดไอคอน SVG กำหนดเอง เพื่อลงทะเบียนงานภาพ โดยเก็บป้ายและตัวเชื่อมในต้นทางแผนภาพ

เลือกพฤติกรรมก่อนแปลงงานภาพ

ลองนึกถึงสัญลักษณ์อุปกรณ์เล็ก: ตัวเครื่องสี่เหลี่ยมพร้อมตัวบอกสถานะวงกลมหนึ่งจุด คุณต้องการใช้ซ้ำในแผนภาพกระบวนการสองสามภาพ

ในแผนภาพแบบงานนำเสนอ อุปกรณ์อาจเพียงต้องดูสม่ำเสมอ ในแผนภาพการเชื่อมต่อ คุณอาจต้องการเส้นยึดกับกึ่งกลางขอบซ้ายและขวา เขียนข้อกำหนดนั้นก่อนเตรียมไฟล์อีกไฟล์

ใส่ SVG เมื่อรูปลักษณ์เพียงพอ

คู่มือใส่ SVG อย่างเป็นทางการ อธิบายการลากไฟล์ SVG จากคอมพิวเตอร์ลงพื้นที่ทำงาน หรือใช้ Arrange → Insert → Image เลือก Actual Size เมื่อถาม แล้วปรับขนาดงานที่ใส่ตามต้องการ

สำหรับตัวอย่างอุปกรณ์ ใช้สำเนาทำงานและตรวจวงกลมบอกสถานะเล็กหลังปรับขนาด รูปทรงที่อ่านชัดเต็มขนาดอาจเสียรายละเอียดที่มีประโยชน์ในแผนภาพกะทัดรัด

เก็บต้นทางงานภาพแก้ไขได้แยกไว้ หากต้องย้ายวงกลมภายในอุปกรณ์ ให้แก้ในโปรแกรมต้นฉบับแล้วแทนภาพส่งมอบ อย่าเสียเวลาหาคำสั่ง Ungroup เพียงเพราะ SVG มีส่วนมองเห็นหลายชิ้น คู่มือวัตถุ SVG และการแยกกลุ่ม ของเราอธิบายว่าโครงสร้างไฟล์มีผลต่อความคาดหวังนั้นอย่างไร

รูปวาด SVG ธรรมดาของทั้งแผนภาพก็ต้องระวัง คู่มือใส่ภาพของ draw.io อธิบายว่า SVG ปกติไม่มีข้อมูลตัวเชื่อมที่ต้องใช้สร้างแผนภาพแก้ไขได้คืน เก็บไฟล์แผนภาพต้นฉบับเมื่อมี

การเปลี่ยนสี SVG ที่ฝังมีข้อกำหนดของตัวเอง

Draw.io ให้สะพานเชื่อมแบบจำกัดระหว่างงาน SVG ที่ฝังกับตัวควบคุมสี คู่มือสี SVG ที่ฝัง ใช้กฎ CSS ภายใน SVG และการตั้งค่า editableCssRules ใน style ของวัตถุที่ใส่ คุณสมบัตินี้ใช้กับภาพฝัง ไม่ใช่ภาพที่ใส่ผ่านลิงก์

สำหรับ SVG ที่มีโครงสร้างกฎ CSS แล้ว เลือกภาพที่ใส่ เลือก Edit Style และเพิ่ม:

editableCssRules=.*;

รูปแบบตามเอกสารเลือกกฎที่เข้าเกณฑ์ทั้งหมด มันต้องอยู่ใน style ของวัตถุ draw.io ไม่ใช่บรรทัดที่วางในมาร์กอัปวาด SVG

ตรวจตัวควบคุมที่ได้ก่อนสร้างไลบรารีโดยพึ่งมัน หากไม่มีตัวควบคุมสีที่มีประโยชน์ เทียบต้นฉบับกับตัวอย่างคลาส CSS ในคู่มือทางการ อย่าคิดว่าการตั้งค่านี้จัดแอตทริบิวต์สี SVG ใด ๆ ใหม่ แยกตัวบอกสถานะอุปกรณ์ หรือสร้างจุดเชื่อมต่อ

สำหรับงานที่ต้องเปลี่ยนสีถาวรเพียงครั้งเดียว การแก้ SVG ต้นทางอาจง่ายกว่า บันทึกสำเนาและตรวจรูปลักษณ์ที่นำเข้าอีกครั้ง

ใช้ stencil ในตัวสำหรับรูปทรงที่นิยามอย่างตั้งใจ

Stencil ในตัวอธิบายรูปทรงด้วยไวยากรณ์ XML ของ draw.io เอง ไม่ใช่ไฟล์ SVG ที่เปลี่ยนชื่อเป็น .xml บทสอนรูปทรงกำหนดเอง ใช้ Arrange → Insert → Shape เปิดโปรแกรมแก้ไขรูปทรงและ Preview ตรวจนิยาม

นี่เป็นจุดเริ่มต้นเล็กที่สร้างเองสำหรับสัญลักษณ์อุปกรณ์:

<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>

สี่เหลี่ยมนอกและวงกลมกลางเรียบง่ายโดยตั้งใจ ค่าพิกัดกำหนดพื้นที่วาดของภาพนี้ ไม่ใช่ขนาดทางกายภาพของอุปกรณ์

เอกสารอ้างอิง XML ระบุพิกัดเชื่อมต่อสัมพัทธ์ ด้วย perimeter="0" ข้อจำกัดสองตัวนี้วางจุดที่กึ่งกลางซ้ายและขวา และกำหนดให้คำสั่งลงสีรูปทรงพื้นหลังอยู่ต้น foreground จึงมี fillstroke ตรงนั้น

ดูตัวอย่างรูป เพิ่มในแผนภาพทดสอบ และลองพฤติกรรมที่ต้องการจริง:

1. เปลี่ยนสีเติมและสีเส้น
2. ยึดตัวเชื่อมกับกึ่งกลางแต่ละจุดที่ต้องการ
3. ย้ายอุปกรณ์แล้วตรวจจุดยึดทั้งสอง
4. ปรับขนาดแล้วตรวจวงกลม เส้นขอบ และตำแหน่งตัวเชื่อม

นี่เป็นนิยามเล็กสำหรับดัดแปลง ไม่ใช่ตัวแปลง SVG เป็น stencil ทั่วไป หากอุปกรณ์ที่วาดมีรายละเอียดตกแต่งมาก ตัดสินว่าส่วนใดควรอยู่ในสัญลักษณ์แผนภาพ การวาดรูปทรงพื้นฐานจำเป็นไม่กี่ชิ้นใหม่อาจดูแลง่ายกว่านำทุกขอบเข้าสู่ stencil

บันทึกไลบรารีหลังรายการผ่านการตรวจ

ไลบรารีเป็นขั้นตอนใช้ซ้ำ คู่มือไลบรารีกำหนดเอง อธิบาย File → New Library การเลือกที่เก็บ และการเพิ่มภาพหรือลากรูปทรงจากพื้นที่ทำงาน ไลบรารีกำหนดเองใช้นามสกุล .xml

บันทึกอุปกรณ์ด้วยชื่อที่บอกสิ่งภายใน เช่น “ภาพอุปกรณ์” หรือ “อุปกรณ์สองพอร์ต” เก็บเป็นรายการแยกหากทั้งสองมีประโยชน์

จากนั้นเปิดแผนภาพใหม่และใส่รายการที่บันทึก ทำการแก้ที่มีความหมายซ้ำหนึ่งอย่าง: เปลี่ยนสีงานหากตั้งไว้ หรือยึดตัวเชื่อมกับ stencil ในตัว วิธีนี้จับไลบรารีที่มีสัญลักษณ์เวอร์ชันก่อนหน้า

ชื่อไฟล์ .xml เพียงอย่างเดียวไม่บอกว่ารายการเป็นรูปทรงในตัวหรือไม่ ทั้งไลบรารีและนิยาม stencil เกี่ยวข้องกับ XML แต่ไลบรารีบรรจุภาพ กลุ่ม รูปทรงกำหนดเอง หรือทั้งแผนภาพได้ ตรวจพฤติกรรมของรายการที่ใส่

กู้งานแรสเตอร์เฉพาะเมื่อต้องการไฟล์เวกเตอร์หลัก

หากภาพอุปกรณ์ต้นฉบับเหลือเพียง PNG หรือภาพสแกน ขั้นตอนคลิปอาร์ตเป็น SVG ของ PerfectVector ช่วยเตรียมงานสำหรับประเมิน ครอบสำเนาให้เหลือลวดลาย ดูตัวอย่างเวกเตอร์ และตรวจขอบนอก รายละเอียดวงกลม พื้นที่ว่าง และพื้นหลังที่ไม่ต้องการ ดาวน์โหลด SVG แล้วลองผ่านวิธีใส่ภาพ

นี่ให้ต้นทางเน้นรูปลักษณ์ไว้ตรวจ ไม่ได้นิยามพอร์ตซ้ายขวา ความหมายตัวเชื่อม หรือ XML stencil ในตัว สร้างสิ่งเหล่านั้นอย่างตั้งใจหากแผนภาพต้องใช้

สัญลักษณ์สี่เหลี่ยมกับวงกลมที่เรียบง่ายมากอาจวาดตรงได้เร็วกว่า การแปลงเป็นพาธมีประโยชน์กว่าเมื่อภาพที่เหลือมีเส้นโค้งเฉพาะที่ต้องเก็บ สำหรับลวดลายวาดมือ คู่มือเตรียมภาพประกอบแผนที่ อธิบายการจัดการงานวาดก่อนแปลง

หาก SVG ยังดูแตกเป็นพิกเซลเมื่อขยาย ตรวจว่ามีบิตแมปฝังด้วย การวินิจฉัยภาพแรสเตอร์ใน SVG ภาพรวมการแปลงภาพเป็นเวกเตอร์ อธิบายความแตกต่างที่กว้างกว่าระหว่างเก็บพิกเซลกับกู้รูปทรง

คำถามที่พบบ่อย

นำเข้า SVG แล้วกลายเป็น stencil ในตัวของ draw.io หรือไม่? ไม่ ขั้นตอนใส่ภาพฝังงานภาพ Stencil กำหนดเองในตัวใช้นิยามรูปทรง XML ของ draw.io สำหรับรูปทรง รูปแบบ และจุดเชื่อมต่อ

เปลี่ยนสีใน SVG ที่ฝังได้หรือไม่? Draw.io อธิบายการแก้สีผ่านกฎ CSS SVG ที่เหมาะและการตั้งค่า editableCssRules ใน style ของวัตถุที่ใส่ ตรวจโครงสร้างต้นทางและตัวควบคุมที่เปิดหลังใส่

ไลบรารีกำหนดเองแปลงพาธ SVG เป็นรูปทรงในตัวหรือไม่? ไลบรารีเก็บรายการใช้ซ้ำ รวมภาพและรูปทรงกำหนดเองในตัว การบันทึกภาพในไลบรารีไม่เพิ่มรูปทรงในตัวหรือความหมายตัวเชื่อมเอง

การแปลง PNG เป็นเวกเตอร์สร้างจุดเชื่อมต่อแผนภาพหรือไม่? ไม่ การแปลงเป็นเวกเตอร์กู้ขอบงานภาพได้ กำหนดจุดเชื่อมต่อและพฤติกรรมแผนภาพในตัวแยกเมื่อต้องใช้

แหล่งอ้างอิง

1. draw.io — ใส่ภาพ SVG ในแผนภาพ — การใส่ภาพ ขนาด และข้อจำกัดสร้างตัวเชื่อมแผนภาพคืนจาก SVG
2. draw.io — สร้างและแก้รูปทรงกำหนดเองซับซ้อน — รูปทรง XML ในตัว ข้อจำกัดเชื่อมต่อ และคำสั่งวาด
3. draw.io — แก้สีในภาพ SVG ที่ฝัง — การแก้กฎ CSS และข้อกำหนดภาพฝังกับภาพเชื่อมโยง
4. draw.io — สร้างรูปทรงกำหนดเอง — โปรแกรมแก้ไข stencil ขั้นตอนดูตัวอย่าง และรูปแบบเริ่มต้น
5. draw.io — ทำงานกับไลบรารีรูปทรงกำหนดเอง — สร้าง บันทึก และใช้รายการไลบรารีผสมซ้ำ

เลือกพฤติกรรมที่ต้องการ เตรียมสัญลักษณ์อุปกรณ์หนึ่งตัว และทดสอบในแผนภาพใหม่ หากเหลือแต่งานแรสเตอร์ ให้ เตรียม SVG สำหรับประเมิน ตรวจขอบ และตรวจภาพที่ใส่ก่อนบันทึกในไลบรารี