คำถามติดแท็ก svg

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

2
ฉันควรใช้ SVG หรือ SVGZ สำหรับกราฟิกเว็บของฉันเมื่อใด
จากความเข้าใจของฉัน SVGZ เป็นไฟล์บีบอัดของ SVG ฉันชอบใช้ภาพ SVG และมีประสบการณ์มากมายกับพวกเขา ทุกครั้งที่ฉันใช้พวกเขาฉันไม่เคยมีกราฟิกที่มีมากกว่าสองสามร้อยกิโลไบต์ ฉันใช้ SVG สำหรับกราฟิกที่ตอบสนองขณะทำเว็บไซต์ตอบสนอง ฉันยังใช้มันเนื่องจากสไตล์การออกแบบที่ฉันชอบคือกราฟิกแบบเวกเตอร์ จุดเด่นด้านการออกแบบที่แข็งแกร่งที่สุดของฉันคือนักวาดภาพประกอบโดยเฉพาะเมื่อพูดถึงการออกแบบกราฟิก อีกเหตุผลหนึ่งที่ฉันจะใช้กราฟิก SVG นั้นเป็นเพราะความสะดวกในการเคลื่อนไหวองค์ประกอบบางอย่างของกราฟิกเช่นแขนขาและอื่น ๆ โดยเฉพาะองค์ประกอบพื้นหลังเช่นเมืองที่แผ่ขยายไปทั่วทั้งหน้าในขณะที่ฉันเคลื่อนไหวแสงไฟกระพริบบ้าง หากไฟล์ถูกบีบอัดมันจะสูญเสียรหัส SVG ดังนั้นฉันจึงไม่สามารถเคลื่อนไหวได้หรือไม่ มีเหตุผลใดบ้างที่ฉันควรใช้ SVGZ แทน SVG ปรับปรุง ฉันตัดสินใจเพียงแค่สร้าง SVG และ SVGZ เพื่อดูว่าพวกเขาดำเนินการกับเว็บอย่างไรเนื่องจากฉันพบว่าผลงาน CS3 โบราณของฉันสามารถบันทึก SVGZ ได้! หลังจากการทดสอบฉันพบปัญหาเกี่ยวกับไฟล์ SVGZ (ทดสอบบน Chrome, Firefox และ IE) หากคุณไปที่ URL โดยตรงของภาพคุณจะได้รับข้อผิดพลาด ฉันสมมติว่าคุณไม่สามารถเข้าถึงรหัส SVG ในไฟล์ประเภทเหล่านี้ได้ สิ่งเหล่านี้ไร้ประโยชน์สำหรับเว็บหรือไม่ .svg …

5
ระบุชื่อคลาส CSS บนพา ธ SVG โดยใช้ Illustrator
มีวิธีแก้ไขไฟล์ SVG ใน Illustrator ที่คุณสามารถระบุคลาส CSS สำหรับแต่ละพา ธ ได้ไหม ฉันรู้อยู่แล้วใน Illustrator ว่าถ้าคุณตั้งชื่อเลเยอร์เป็นชื่อจริงแล้ว Illustrator จะใช้ชื่อนั้นเป็น ID ของพา ธ ซึ่งใช้ได้ถ้าคุณไม่ได้วางแผนที่จะใช้ไอคอนซ้ำอีกครั้งในหน้าเดียวกัน วิธีแก้ปัญหาปัจจุบันของฉันคือการใช้เมธอด ID แต่หลังจากนั้นแปลง ID เป็นคลาสในตัวแก้ไขโค้ดของฉัน แต่มันค่อนข้างน่ารำคาญที่ต้องทำทุกครั้งที่สร้างสไปรต์ SVG ของฉัน หากไม่สามารถทำได้ใน Illustrator ในปัจจุบันมีแอพอื่น ๆ ที่จะอนุญาตให้คุณระบุหรือไม่? หรืออาจเป็นแพ็คเกจ Grunt หรือ Gulp? ดูเหมือนว่าคุณอาจจะทำกับ Inkscape ด้วยการแฮ็กดังนั้นฉันอาจดูว่าหากไม่มีวิธีแก้ปัญหาที่ดีอื่น ๆ

4
วิธีแปลง SVG ให้เป็น rasterize โดยไม่ใช้ anti-aliasing
ฉันทำแผนที่ใน inkscape และตอนนี้จำเป็นต้องเปลี่ยนเป็นบิตแมปหรือ. png แผนที่จะถูกตีความโดยโปรแกรมคอมพิวเตอร์ซึ่งจะมองหาสีที่แน่นอนดังนั้นขอบจำเป็นต้องมีความคมชัด เมื่อฉันส่งออก. png ด้วย inkscape ให้ใช้ตัวแปลงไฟล์ออนไลน์หรือแม้กระทั่งจับภาพหน้าจอมันจะต่อต้านนามแฝงอยู่เสมอ ช่วยด้วย.

2
การฝังแบบอักษรใน inkscape
ร่างกายใด ๆ รู้ว่าสถานะปัจจุบันของการฝังฟอนต์ลงในไฟล์ svg ที่สามารถอ่านได้โดย inkscape ฉันพบว่าการขาดแบบอักษรฝังตัวนั้นขัดขวางการพกพาไฟล์ svg อย่างรุนแรงโดยเฉพาะอย่างยิ่งหากส่งไฟล์ไปยังบุคคลที่ไม่มีสิทธิ์การเข้าถึงระดับผู้ดูแลระบบบนเครื่องของพวกเขาและไม่สามารถติดตั้งแบบอักษรได้ ฉันพยายามทำตามคำแนะนำที่ให้ไว้ในลิงค์นี้: HOWTO: การฝังแบบอักษรในเอกสาร Linux Inkscape SVG แต่ไม่สามารถใช้งานได้ลิงก์นี้ยังแนะนำว่าเป็นไปได้: https://answers.launchpad.net/inkscape/+question/83618 ฉันเป็นธรรมฉันพยายามที่จะให้มันทำงานบน windows ไม่ใช่ linux (ฉันไม่สามารถเข้าถึงเครื่อง linux ได้ในขณะนี้) มีใครรู้หรือมีสิทธิ์เข้าถึงไฟล์ svg จริงที่คุณสมบัตินี้ใช้งานได้หรือไม่
20 fonts  inkscape  svg  embedded 

6
เครื่องมือสร้าง SVG แบบเคลื่อนไหวหรือไม่
มีเครื่องมือกราฟิกใด ๆ ในการสร้างและแก้ไขภาพเคลื่อนไหว SVG หรือไม่? Inkscape นั้นยอดเยี่ยม แต่มันทำทุกอย่างยกเว้นภาพเคลื่อนไหว ฉันสร้างรูปภาพใน Inkscape จากนั้นแก้ไข XML ด้วยตนเองเพื่อเพิ่มคุณสมบัติภาพเคลื่อนไหว และนี่ทำให้ฉันได้สิ่งที่ฉันต้องการ แต่สำหรับการออกแบบที่ซับซ้อนกว่าเล็กน้อยมันน่าเบื่อมาก
17 animation  svg 

5
SVG สำหรับกราฟิกการพิมพ์
กราฟิกแบบเวกเตอร์ Scalable ทำงานได้ดีเพียงใดในการพิมพ์ ฉันต้องการสร้างกราฟิกโดยทางโปรแกรมเพื่อรวมไว้ในเอกสารการพิมพ์ ดูเหมือนว่าจะมีคู่แข่งที่ร้ายแรงเพียงสองรายสำหรับรูปแบบไฟล์เป้าหมายคือ EPS และ SVG ในฐานะโปรแกรมเมอร์ SVG ดูเหมือนจะทำงานได้ง่ายขึ้น แต่ดูเหมือนว่าจะไม่ได้รับการยอมรับจากอุตสาหกรรมกราฟิก เคยมีโครงการที่จะพิมพ์กราฟิกพื้นฐานบน SVG (เช่น Adobe PDFXML) แต่ตอนนี้ดูเหมือนจะไม่มีงานใด ๆ เครื่องมือของ Adobe ดูเหมือนจะจบลงด้วยการย่อ SVG หากฉันเลือก SVG เป็นรูปแบบที่สามารถส่งมอบได้ปัญหาใดบ้างที่อาจเปรียบเทียบกับทางเลือกอื่น ฉันได้ยินเรื่องร้องเรียนเกี่ยวกับการจัดการข้อความของ SVG แต่ฉันไม่พบการสนทนาที่ละเอียด อีกสิ่งหนึ่งที่ฉันสงสัยว่าอาจเป็นปัญหาคือวิธีที่ SVG แปลงเป็น PDF ได้อย่างสมบูรณ์
17 svg 

5
ฉันจะบันทึก SVG ที่อยู่บนเว็บไซต์ไปยังคอมพิวเตอร์ของฉันได้อย่างไร
ฉันต้องการทำงานกับโลโก้จากเว็บไซต์นี้(ที่มุมบนซ้าย): นี่คือส่วนของรหัสที่ฉันคัดลอกมาจากหน้า: <svg viewBox="0 0 215 50" height="50" width="215" xmlns="http://www.w3.org/2000/svg"><path d="M128.783 40.08v7.74h2.078v-5.66h18.843v5.66h2.08v-7.74h-3.322V5.82h-14.017c0 14.588-.467 23.26-2.596 34.263h-3.064zm-43.58 2.08h4.154V5.82h-4.153v3.116l-9.138 24.352V5.818h-4.153V42.16h4.153v-3.114l9.138-24.35v27.465zm-22.842 0h4.36l-6.904-21.08 4.83-15.262h-2.13l-4.88 15.263H52.08V5.82h-4.155V42.16h4.156v-19h4.048l6.233 19zm71.562-2.08c1.764-10.433 2.492-18.842 2.598-32.186h7.783V40.08h-10.38zm74.6 2.08h4.31L204.894 5.82h-4.31l.88 4.206-6.852 32.137h2.13l2.59-12.097h6.548l2.643 12.098zm-169.574 0h4.31L35....8zm147.355 0h4.158V5.82h-13.968v2.076c-.05 8.05-.414 18.12-1.143 23.204-.466 3.066-1.61 5.508-3.532 5.508v5.555c3.588 0 4.623-4.83 5.246-9.24.936-6.752 1.4-16.976 1.506-25.025h7.732V42.16zM159.88 7.896h9.347V5.818H155.73V42.16h13.497v-2.08h-9.348V20.564h7.265v-2.076h-7.266V7.895zm-59.1 0h9.34V5.818H96.626V42.16h13.496v-2.08h-9.34V20.564h7.266v-2.076h-7.265V7.895zm-96.2 0h8.306v34.267h4.152V7.895h8.306V5.818H4.58v2.077zm28.396 6.023l2.858 14.067h-5.66l2.802-14.067zm169.58 0l2.853 14.067h-5.66l2.807-14.067z"></svg> ฉันไม่ชำนาญในเรื่องนี้มากนัก แต่ได้ลองวางลงในไฟล์ข้อความแล้วโดยการบันทึกเพิ่มเติมเป็น …

3
มีวิธีในการกลับลำดับของจุดยึดในเส้นทางหรือไม่?
มีวิธีใดที่จะย้อนกลับลำดับของจุดยึดในเส้นทางหรือไม่? ฉันไม่ต้องการวาดเส้นทางอีกครั้ง ฉันต้องการเปลี่ยนจุดยึดเริ่มต้นจากจุดเริ่มต้นของเส้นทางใด ๆ ไปยังจุดสิ้นสุด การกลับคำสั่งของจุดยึดที่ฉันวาดไปแล้วมีประโยชน์บางอย่างกับฉันเช่น: การใช้แปรงศิลปะโดยไม่พลิกทิศทางของแปรงในกล่องโต้ตอบตัวเลือกจังหวะ หากฉันต้องการให้ SVG ของฉันปรากฏในหน้าเว็บใด ๆ ตามลำดับที่ฉันต้องการเช่นเอฟเฟ็กต์ภาพวาดจังหวะการวาด

2
แปลงดั้งเดิมเป็น Path โดยใช้รูปแบบ SVG ใน Illustrator
ฉันมีรูปวาดอย่างง่ายใน Illustrator ที่ประกอบด้วยหลายรูปสี่เหลี่ยม ฉันจะต้องจัดการมันในรหัสภายหลังและบันทึกเอกสารเป็น SVG สี่เหลี่ยมออกมาเป็น<rect />โหนดในรูปแบบ SVG มีวิธีที่สะอาดในการแปลงรูปสี่เหลี่ยมผืนผ้าจากชนิดดั้งเดิมไปเป็นเส้นทางใน Illustrator หรือไม่? ถ้าเป็นเช่นนั้นได้อย่างไร เพื่อให้ห่างไกลการแก้ปัญหา hacky ของฉันคือการใช้วัตถุ> เส้นทาง> ลดความซับซ้อนและเพราะผมกำลังจัดการกับกล่องที่เรียบง่ายไม่มีการเปลี่ยนแปลงนำไปใช้ผมเคย ticked ยังเป็นเส้นตรง วิธีนี้ใช้งานได้ดีกับกล่อง (รักษาจำนวนจุดยอดและดูเท่าเดิม) มีวิธีที่ยุ่งเหยิงหรือสะอาดน้อยกว่าในการแปลงดั้งเดิมเป็นเส้นทางใน Illustrator หรือไม่?

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

6
ซอฟแวร์ใดที่ทำให้การฉายภาพในระนาบของวัตถุ 3 มิติเป็นกราฟิกแบบเวกเตอร์
ฉันต้องการสร้างการฉายสองมิติของวัตถุเรขาคณิตสามมิติ ภาพวาดควรอยู่ในรูปแบบเวกเตอร์, SVG หรือ PDF ซึ่งสามารถนำเข้าได้โดย Inkscape หรือ Adobe Illustrator บน Wikipedia ฉันพบตัวอย่างต่อไปนี้ ( ต้นฉบับ SVG, CC-SA ): เหล่านี้คือการคาดการณ์ภาพวาดสามมิติ รุ่นโครงร่างดังกล่าว (เส้นสีดำเท่านั้น) สามารถสร้างด้วยคุณลักษณะ Axonometric กริด Inkscape ของ อย่างไรก็ตามวิธีนี้ไม่ได้ช่วยในการแรเงา ทรงกลมจะดูแบนถ้าลาดหายไป มีโปรแกรมคล้ายกับ Inkscape หรือไม่ซึ่งให้คุณเลือกตำแหน่งของแหล่งกำเนิดแสงและสร้างระนาบการฉายด้วยการไล่ระดับสี ข้อบกพร่องอื่น ๆ ของแอปพลิเคชันเวกเตอร์ 2D เช่น Illustrator หรือ Inkscape นั้นยากที่จะวาดวัตถุที่ไม่ได้จัดแนวกับแกนกริด สมมติว่าคุณต้องการหมุนลูกบาศก์ในรูปโดย 20 °โดยไม่เปลี่ยนมุมมอง คุณจะทำอย่างไร หมายเหตุ:ด้วยความช่วยเหลือจากคำตอบที่พบที่นี่ฉันพบเครื่องมือต่อไปนี้ที่มีแนวโน้ม: วิธีการแสดงผล Vector สำหรับเครื่องปั่น (ซอฟต์แวร์ฟรี) Maya …

1
ค่า SVG และ viewBox
ฉันแค่อยากรู้อยากเห็นถ้าใครรู้ว่าviewBoxค่า (เช่นviewBox="a b c d") จะถูกกำหนด ฉันพยายามเข้าใจฟังก์ชั่น SVG ของ Inkscape ดังนั้นสิ่งที่ฉันทำคือสร้างเอกสารใน Inkscape นั่นคือ100pxx 100pxวาดเส้นจากด้านซ้ายของวิวพอร์ต (เช่น0ค่าแนวนอน) ไปทางขวา (เช่น100ค่าแนวนอน) . แปลก แต่เมื่อฉันบันทึกเอกสารนี้เป็นไฟล์ธรรมดา SVG และจากนั้นเปิดไฟล์ในโปรแกรมแก้ไขข้อความที่viewBoxค่ามีการกำหนดให้แทนการพูดviewBox="0 0 26.458333 26.458334"viewBox="0 0 100 100" มีใครรู้บ้างว่าค่าเหล่านี้ ( 0 0 26.458333 26.458334) ถูกกำหนดไว้อย่างไรและทำไมไม่มีความสัมพันธ์ระหว่างค่าเหล่านี้กับขนาดวิวพอร์ต? PS ฉันรู้ว่าคุณสามารถแก้ไขviewBoxคุณสมบัติด้วยตนเองได้ในตัวเลือกเอกสาร แต่ฉันยังสงสัยว่าทำไม Inkscape จึงตั้งค่าเหล่านั้นให้เป็นค่าที่ขี้ขลาด
14 inkscape  svg  xml 

1
การออกแบบไอคอนที่ระดับ 100% หมายถึงอะไร
จากคู่มือของ Android การออกแบบวัสดุ , ไอคอนระบบจะแสดงที่ 24dp เมื่อสร้างไอคอนสิ่งสำคัญคือการออกแบบที่ระดับ 100%เพื่อความแม่นยำของพิกเซล การออกแบบในระดับ 100% หมายถึงอะไร หมายความว่าไอคอนควรมีขนาด 24 * 24 dp หรือไม่ หรือหมายความว่าควรอยู่ในรูปแบบไฟล์ซึ่งการขยายจะไม่ส่งผลให้ข้อมูลสูญหายหรือผิดเพี้ยนเป็นต้นเช่นรูปแบบไฟล์ SVG

2
วิธีการวาดภาพ svg ให้พอดีกับผืนผ้าใบบนบรรทัดคำสั่ง
การครอบตัด.svgไฟล์ในบรรทัดคำสั่งนั้นง่ายมาก: $ inkscape --verb=FitCanvasToDrawing --verb=FileSave --verb=FileClose *.svg ฉันต้องทำสิ่งที่ตรงกันข้าม ฉันต้องการให้พอดีกับรูปวาดลงใน64 x 64ผืนผ้าใบจุด (ตั้งค่าแล้วใน.svgไฟล์ทั้งหมด) น่าเสียดายที่ Inkscape ไม่มีFitDrawingToCanvasคำสั่ง ยิ่งไปกว่านั้นความเหมาะสมควรจะรักษาอัตราส่วนของภาพวาด ถ้ามันเป็นเรื่องสำคัญ: ฉันใช้ Ubuntu raring

1
สไตล์ที่ถูกต้องคืออะไรซึ่งอธิบายภาพต่อไปนี้
ชื่อหรือชื่อของสไตล์ที่ใช้ในภาพต่อไปนี้คืออะไร พวกเขาจะใช้บน Google, Facebook, atlassian.com , bitbucket.orgและข้อมูลกราฟิก ฉันอ้างถึงพวกเขาว่าเป็นภาพไลฟ์สไตล์ แต่ต้องการค้นหาภาพประเภทนี้ แต่ฉันไม่รู้จักคำที่ถูกต้อง หากฉันค้นหารูปภาพจาก Google ด้วยภาพฉันจะได้รับแหล่งที่มาของรูปภาพไม่ใช่ข้อมูลเกี่ยวกับสไตล์

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.