เปลี่ยนแอตทริบิวต์ viewbox ใน svg ส่งออกโดย illustrator


38

ฉันมีไฟล์ SVG พร้อมด้วย viewBox = "- 155.7 -99 510 510" ฉันเชื่อว่าสิ่งนี้ชดเชยเส้นทางในตัวอย่าง Mac OS X โดย -155.7 -99 เมื่อฉันเปิด SVG ใน Illustrator เส้นทางจะไม่ตรงข้ามเลย ฉันจะส่งออก svg นี้อย่างไร:

  1. viewBox = "0 0 510 510"
  2. และพา ธ ทั้งหมดได้เพิ่มออกจากชุด -155.7 -99

ฉันได้ลองเปลี่ยนตำแหน่งของกระดานภาพ แต่ต้นกำเนิดของช่องมองภาพไม่เคยเป็น 0,0

คำตอบ:


6

ฉันทำการวิจัยเล็กน้อยเกี่ยวกับ SVG และเห็นได้ชัดว่าช่องมองภาพไม่ใช่องค์ประกอบที่สามารถส่งออกได้ผ่าน Illustrator องค์ประกอบ viewbox เข้ากันได้กับบางโปรแกรมที่เลือกที่จะใช้องค์ประกอบนี้หรือจัดการมัน น่าเศร้าที่ผู้วาดภาพประกอบไม่ใช่หนึ่งในนั้น

หากคุณบันทึก SVG จาก Illustrator โดยไม่มี "Preserve ความสามารถในการแก้ไข Illustrator" คุณสามารถย้อนกลับกระบวนการได้ ไม่ว่าการเปลี่ยนแปลงใด ๆ ที่คุณทำในข้อมูลของไฟล์ SVG จะแสดงให้เห็นใน Illustrator แต่ด้วยการเปลี่ยนตำแหน่งและการปรับขนาดทั้ง Artboard และเลเยอร์เพื่อสร้าง pseudo-viewbox

ตอนนี้คุณสามารถทำได้คือออกแบบงานใน Illustrator และรหัสพิเศษทั้งหมดสำหรับออฟเซ็ตและการวางตำแหน่งของช่องมองภาพภายในข้อมูลไฟล์ คุณสามารถสร้าง pseudo-viewbox ได้โดยเพียงแค่เปลี่ยนตำแหน่งความกว้าง + ความสูง / X + Y ของบอร์ดจากนั้นเปลี่ยนวัตถุขนาดและตำแหน่งของแอตทริบิวต์เช่นกัน แต่จะไม่มีแอตทริบิวต์ viewbox ที่แท้จริงเว้นแต่พวกเขาจะเผยแพร่การอัปเดตไปยัง Illustrator พร้อมด้วยคุณสมบัติช่องมองภาพที่แก้ไขได้

บางคนอ่านเกี่ยวกับรูปแบบ SVG ใน Illustrator: Adobe Illustrator บันทึกในรูปแบบ SVG


1
Illustrator ทำการส่งออกแอตทริบิวต์ viewbox ในฐานะของ Illustrator CC (v 17.x)
Jake Wilson

33

ฉันพบปัญหานี้หลายครั้งและสิ่งเดียวที่ทำงานให้ฉันได้อย่างน่าเชื่อถือรีเซ็ตช่องมองภาพ SVG เป็น 0, 0 อย่างแม่นยำเมื่อส่งออกจาก Illustrator คือการสร้างเอกสารเปล่าใหม่และคัดลอกและวางงานศิลปะลงในนั้น .

มุมซ้ายบนของบอร์ดเริ่มต้นที่ไม่มีการแตะต้องนี้จะส่งออกเป็นจุด 0, 0 ของกล่องมุมมอง ใช้ smart guide ( cmd-u) หรือalignตั้งค่าหน้าAlign to Artboardต่างหากคุณต้องการให้อาร์ตเวิร์คของคุณเริ่มต้นที่ 0, 0

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


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


1
สิ่งนี้ใช้ไม่ได้กับฉันโดยใช้ Illustrator CC ฉันยังได้ลองขนาดที่กำหนดเองของ Art Art เพื่องานศิลปะ SVG สุดท้ายมีวิวพอร์ตที่อยู่กึ่งกลางเสมอ
wprater

1
Strange - สามารถใช้งาน CS6 ได้อย่างแน่นอน ต้องมีการเปลี่ยนแปลงระหว่าง CS6 และ CC - ดูเหมือนเป็นการเปลี่ยนแปลงที่แปลก
user56reinstatemonica8

1
@ user568458 นี่เป็นเทคนิคที่ฉันใช้ไม่แน่นอน แต่ก็คล้ายกันมาก การแปลงเป็น 'Artboard' ใน Illustrator จะแปลค่าของviewboxการเปลี่ยนแปลงในการส่งออกเป็น SVG โดยตรง คุณถูกต้องสมบูรณ์ในการสร้างเอกสารใหม่และคัดลอกงานศิลปะทั้งหมด คำตอบของคุณควรถูกทำเครื่องหมายว่าเป็น +1 ที่ถูกต้อง
เทอร์รี่

2
Adobe เป็นผู้สนับสนุนคนสำคัญของ SVG แต่เมื่อ svg เกิดขึ้นพวกเขาไม่ได้ทำอะไรเลยในหลายปีหลังจากการซื้อ Macromedia เพราะพวกเขาต้องการแฟลชที่จะประสบความสำเร็จ
joojaa

1
ฉันใช้ Adobe Illustrator CC 18.1.0 และสร้างเอกสารใหม่ที่สมบูรณ์คัดลอกและวาง svg ของฉันแล้วทำการบันทึกใหม่ดูเหมือนว่าจะทำเคล็ดลับ ฉันตรวจสอบให้แน่ใจว่าได้ตรวจสอบPreserve Illustrator Editing Capabilitiesครั้งแรกที่ฉันบันทึกไว้ในกรณีที่ฉันต้องทำการปรับเปลี่ยนเพิ่มเติมและหลังจากที่ฉันคิดว่าทุกอย่างดีพอแล้วฉันบันทึกมันโดยไม่ใช้มัน (การเพิ่มขนาดไฟล์ค่อนข้างสำคัญดังนั้นคุณจะต้องทำ นี้)
สิงหาคม

7

ฉันรู้ว่ามันสายเกินไปสำหรับหัวข้อ แต่ฉันมีปัญหาเดียวกันนี้และทำสิ่งต่อไปนี้

  1. เปิด SVG ในเท็กซ์เอดิเตอร์และเปลี่ยนแอ็ตทริบิวต์ viewBox เป็น 0 0 xy
  2. บันทึกและเปิดใหม่ใน Illustrator
  3. ตอนนี้งานศิลปะจะถูกวางตำแหน่งด้านนอกของกระดานภาพ - ย้ายกลับไปที่ 0 0
  4. บันทึกและดูตัวอย่างมันควรจะทำงานได้ดี

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


สวัสดีมาร์คยินดีต้อนรับสู่ GDSE และขอบคุณสำหรับคำตอบของคุณ หากคุณมีคำถามใด ๆ โปรดดูศูนย์ช่วยเหลือหรือส่ง Ping เราในการแชทเมื่อชื่อเสียงของคุณเพียงพอแล้ว (20) ร่วมให้ข้อมูลและเพลิดเพลินกับเว็บไซต์!
Zach Saucier

ฉันพบว่าการเพิ่มwidth="<W>" height="<H>"ในโปรแกรมแก้ไขข้อความรายการโปรดของคุณไปยังแท็ก SVG ก็ช่วยได้เช่นกัน (ที่ไหน<W>และ<H>จะเป็นเลขทศนิยม)
jtheletter

4

ฉันมีปัญหาคล้ายกันมากที่ AI สร้าง SVG ของฉันไม่ได้อยู่กึ่งกลางและขยายไปยังหน้าต่างเบราว์เซอร์เต็มรูปแบบเนื่องจาก AI ยังคงเปลี่ยนขนาดบอร์ดและลืมเกี่ยวกับการจัดกึ่งกลาง

วิธีเดียวในการแก้ไขคือมีขั้นตอนการประมวลผลด้วยตนเองขั้นสุดท้ายใน Inkscape

  • เปิด SVG ใน Inkscape
  • ปรับขนาดผ้าใบภายใต้ไฟล์ -> คุณสมบัติเอกสาร
  • ปรับขนาดและย้ายงานศิลปะของคุณโดยเลือกและป้อน w, h ในแถบเครื่องมือแก้ไข

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

เนื่องจาก SVG ทั้งหมดของฉันเป็นไอคอนที่มีขนาดเท่ากันขั้นตอนการประมวลผลนี้ใช้เวลาเพียง 1 นาทีเนื่องจากฉันมีพื้นที่ผ้าใบและขนาดวัตถุเดียวกันเสมอ แต่ใช่มันเป็นความอัปยศที่ขั้นตอนนี้เป็นสิ่งจำเป็นและควรได้รับการแก้ไขใน AI


0

ฉันคิดออกแล้ว ที่สุด! มีวิธีง่าย ๆ ในการทำเช่นนี้ ชอบมาก

<svg id="xbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60.7"><title>xbox</title><rect width="200" height="60.68" style="fill:none"/><path d="M195.2,49.2l-11.8-16-11.5,16h-4.8L181.2,30,168.4,12.8h4.8l10.2,14,10.5-14h4.8L185.9,30,200,49.2Zm-90.7,0L90.4,30l12.8-17.2H98.4l-10.5,14-10.3-14H72.8L85.6,30l-14,19.2h4.8l11.5-16,11.8,16Z" style="fill:#0f7c10"/><path d="M131,31.3l-2.2-1.6a8.2,8.2,0,0,0,4.4-7c0-2.6-.9-9.9-12.1-9.9H106.4V28.4h-4.8l-2.9,3.5h7.7V49.2h14.7c8.3,0,13.1-4.2,13.1-10.9a8.6,8.6,0,0,0-3.2-7m-20.5-15h10.6c3.2,0,8,1,8,6.1s-2.9,6-8,6H110.5Zm10.6,29.1H110.5V31.9h10.6c4.1,0,8.9,1.3,8.9,6.4s-5.4,7.1-8.9,7.1m32.3-33.6c-10.3,0-17.3,7.7-17.3,19.2s7,18.8,17.3,18.8,17.5-7.6,17.5-18.8-7.3-19.2-17.5-19.2m0,34.2c-7.7,0-13.1-6.1-13.1-15s5.4-15.3,13.1-15.3S166.8,22,166.8,31s-5.5,15-13.4,15M8.9,8.6h0A31,31,0,0,0,0,30.4,32.5,32.5,0,0,0,6.1,48.9h.3C4.2,41.5,16,24.3,22,16.9h0C11.8,6.4,8.9,8.9,8.9,8.6m42.9,0h0a31,31,0,0,1,8.9,21.8,32.5,32.5,0,0,1-6.1,18.5h-.3c2.2-7-9.6-24.3-15.6-31.6h0C48.9,7,51.8,9.6,51.8,9.3M30.4,0A29.9,29.9,0,0,1,46.3,4.5h0c0,.3,0,.3-.3.3C40.3,3.5,31.3,8.3,30.4,8.9h0C28.1,7.7,19.8,3.2,14.7,4.8a.3.3,0,0,1-.3-.3h0A30,30,0,0,1,30.4,0m0,24.3h0c9.2,7,24.9,24.3,20.1,29.1h0a31.5,31.5,0,0,1-40.3,0h0C5.8,48.6,21.1,31.3,30.4,24.3h0" style="fill:#0f7c10"/></svg>

ปัญหาเกิดขึ้นเมื่อคุณส่งออกภาพจาก Illustrator (มากเท่าที่ทำได้) artboard จะไม่รวมอยู่ใน SVG ที่ส่งออก เส้นทางไม่มีอะไรมายึดตามการคำนวณของพวกเขา

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

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

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

เมื่อต้องการทำเช่นนี้ในโค้ดมันจะปรากฏขึ้นคุณสามารถตัดพา ธ ใน a rectและตั้งค่าความกว้างและความสูงได้จากนั้นคุณสามารถตั้งค่าviewBoxเป็นแบบเดียวกัน (คงอัตราส่วนไว้เหมือนเดิม) ดังแสดงในตัวอย่างด้านบน ฉันไม่ได้ทดสอบสิ่งนี้ แต่ฉันจะทดสอบและอัปเดต


0

ฉันก็สามารถที่จะแก้ไขได้โดยใช้Inkscape ดูเหมือนว่า Illustrator จะรองรับไฟล์ SVG ได้ไม่ดี

  1. เปิดไฟล์ svg ใน Inkscape CTRL + O
  2. จากนั้นสร้างไฟล์ใหม่ CTRL + N
  3. CTRL + SHIFT + D Document Properties และปรับขนาด artboard 3
  4. เลือกและคัดลอก svg ในไฟล์ที่สร้างขึ้นใหม่
  5. ตอนนี้ปรับสินทรัพย์โดยการเปลี่ยนค่าตำแหน่งและขนาด เช่นเดียวกับการตั้งค่าตำแหน่งเป็น Origin และความกว้างและความสูงเป็นขนาดเอกสาร 5
  6. บันทึกไฟล์ใหม่
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.