ฉันสามารถแปลงข้อความ SVG เป็นเส้นทาง แต่ใช้ glyphs ซ้ำได้หรือไม่

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

ดังนั้นฉันจึงแปลงข้อความเป็นเส้นทาง เรากำลังพูดถึงป้ายกำกับแยกกันมากถึง 4,000 รายการ บางที 15,000 รูปร่างใหม่ตอนนี้เป็นเวกเตอร์ มันคือ 4MB ปกติคุณอาจจะเถียงเรื่องนี้จะให้ยืมตัวไปอัด แต่ฉันต้องในบรรทัด SVG นี้ในรูปแบบ HTML ฉันกำลังเพิ่มการเปลี่ยนแปลง CSS แบบไดนามิกและเป็นวิธีเดียวที่ฉันมีโอกาสได้รับการสนับสนุนข้ามเบราว์เซอร์ ดังนั้นวัตถุดิบที่สิบเอ็ดถูกขัดเอาท์พุทของสิ่งนี้ใหญ่เกินไปที่จะเป็นประโยชน์

สิ่งที่กระทบฉันที่นี่คือจำนวนพื้นที่ทั้งหมดเหล่านี้มีร่ายมนตร์ร่วมกัน ศูนย์ถึงเก้า เหตุใดฉันจึงต้องรวมคำจำกัดความของรูปร่างสำหรับทุกอินสแตนซ์ของทุกหมายเลข ฉันสามารถทำซ้ำสิ่งเหล่านี้ได้หรือไม่

ฉันใช้ Inkscape แต่ฉันเปิดรับข้อเสนอแนะ

<use>องค์ประกอบช่วยให้คุณสามารถนำมาใช้ใหม่วัตถุที่กำหนดไว้ที่อื่น ๆ ในเอกสาร ตัวอย่างเช่นคุณสามารถกำหนดสัญลักษณ์แต่ละอันเป็น a <symbol>แล้วนำมาใช้ซ้ำได้หลายครั้ง นี่เป็นบทความที่ดีเกี่ยวกับมันโครงสร้าง, การจัดกลุ่มและการอ้างอิงใน SVG - The <g>, <use>, <defs>และ<symbol>องค์ประกอบ

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

มีตัวเลือกการบีบอัดที่พร้อมใช้งานซึ่งจะนำเสนอระดับความสำเร็จที่แตกต่างกัน เพื่อทดสอบพวกเขาฉันสร้างไฟล์อาร์ตเวิร์คที่มีข้อความซ้ำจำนวนมากเพียงอย่างเดียว ไม่ขยายไฟล์ขนาด 13.8 KB ขยายขนาดของไฟล์1.42 MB

ตัวเลือกที่ดี: ใช้ SVGZ - 46.5 KB

การบันทึกงานศิลปะแบบขยายเนื่องจาก SVGZ ให้ไฟล์เอาต์พุต 46.5 KB ซึ่งมีขนาดเล็กกว่า SVG มาตรฐานอย่างมาก รับทราบว่าที่สนับสนุนอาจแตกต่างกัน

ตัวเลือกที่ดีกว่า: บีบอัดด้วย Scour - 21.1 KB

กัดเซาะเป็นเครื่องมือที่จะขัดและเพิ่มประสิทธิภาพไฟล์ SVG ของคุณสำหรับคุณ การใช้คำสั่ง "การบีบอัดสูงสุด" ของscour -i input.svg -o output.svgz --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=noneงานศิลปะที่ขยายเพิ่มจะลดลงเป็น 21.1 KB ไม่ไกลจากขนาดไฟล์ดั้งเดิมที่ยังไม่ขยาย!

นี่คือในเบราว์เซอร์หรือโซลูชั่นเซิร์ฟเวอร์

มีหลายวิธีในการเพิ่มประสิทธิภาพไฟล์ SVG ฟังดูเหมือนคุณทำมาแล้ว

แหล่งข้อมูลไม่กี่แห่งที่ฉันพบว่ามีประโยชน์มากเป็นบทความ css-tricksที่เน้นรายละเอียดเฉพาะมาก และโดยเฉพาะเครื่องมือที่ใช้SVGO

หากคุณมีเส้นทางซ้ำหลายครั้งฉันจะพิจารณาใช้จาวาสคริปต์เพื่อสร้างรูปร่างแบบไดนามิก มีตัวอย่างเป็นที่นี่ ทิศทางเดียวคือการมีฟังก์ชั่นที่กำหนดไว้สำหรับแต่ละสัญลักษณ์และมีแต่ละเส้นทางภายในองค์ประกอบ svg ที่สร้างขึ้นโดยการร้องขอสำหรับฟังก์ชันนั้น หรือรับค่าสตริงเต็มและ / หรืออาเรย์ของอาร์กิวเมนต์เพื่อสร้างอินไลน์ svg ของคุณ แน่นอนว่าสิ่งนี้คาดว่าเส้นทางของคุณจะยาวเกินความยาวของรหัสที่ต้องใช้ในการขอฟังก์ชั่นที่กล่าวมา

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

• วนรอบองค์ประกอบข้อความทั้งหมดใน xml ของ SVG และสำหรับองค์ประกอบที่มีข้อความเป็นตัวเลข (จุดจอดรถคุณไม่ได้ระบุว่ามีข้อความใน svg ของคุณมากขึ้น) เปลี่ยน id ที่สร้างขึ้นโดย Inkscape เป็นสตริงด้วยการจอดรถนั้น หมายเลขของจุด Inkscape ต้องการเฉพาะ ID ที่ไม่ซ้ำกันมันสร้างรหัสที่ไม่ใช่คำอธิบาย แต่จะเคารพและไม่เปลี่ยนรหัสที่สร้างขึ้นโดยซอฟต์แวร์อื่น ๆ หรือสร้างหรือเปลี่ยนแปลงด้วยตนเองโดยผู้ใช้
• ในตารางจัดเก็บพิกัด x & y ขององค์ประกอบข้อความของที่จอดรถแต่ละจุด
• ไม่ว่าจะใน Inkscape หรือโดยการเขียนสคริปต์แปลงข้อความที่จอดรถจุดทั้งหมดเป็นเส้นทาง
• สำหรับตัวเลข 0-9 ต่อท้ายไฟล์ SVG <defs>ส่วนที่เหมาะสมจะกำหนดข้อมูลพา ธ สำหรับแต่ละหลัก
• วนรอบ<g>จุดจอดรถทั้งหมดแล้วแทนที่ด้วยจุด<use xlink:href="#digit" x=x y=y />
• กำไร

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

• การวนซ้ำจะต้องแยกสายของจุดจอดรถที่มี 2 หลักหรือมากกว่าและระยะห่างที่เหมาะสมระหว่างหลักแรกและหลักถัดไปอาจจะยุ่งยาก สิ่งนี้จะขึ้นอยู่กับแบบอักษรที่คุณใช้เป็นอย่างมาก
• คุณไม่ได้ระบุตำแหน่งที่จอดรถว่าอยู่ในทิศทางใดหรืออยู่ในแนวตั้งหรือแนวโค้ง เนื่องจากด้วยตนเอง x, y ชดเชยตัวเลข 2 หลักและมากกว่าคุณอาจต้องใช้ตรรกะเพิ่มเติมเพื่อหา 'การวางแนว' ของที่จอดรถและวิธีการเว้นวรรคพา ธ ที่แตกต่างกันของตัวเลขแต่ละตัวให้ถูกต้องจากที่หนึ่ง

หวังว่านี่จะช่วยได้ โชคดี.