ฉันจะบันทึก SVG ที่อยู่บนเว็บไซต์ไปยังคอมพิวเตอร์ของฉันได้อย่างไร

16

ฉันต้องการทำงานกับโลโก้จากเว็บไซต์นี้(ที่มุมบนซ้าย):

ป้อนคำอธิบายรูปภาพที่นี่

นี่คือส่วนของรหัสที่ฉันคัดลอกมาจากหน้า:

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

ฉันไม่ชำนาญในเรื่องนี้มากนัก แต่ได้ลองวางลงในไฟล์ข้อความแล้วโดยการบันทึกเพิ่มเติมเป็น ".svg" แต่ทั้งหมดนั้นไร้ประโยชน์
(อาจมีบางอย่างผิดปกติกับแท็ก)

PS: ทุกอย่างโอเคกับลิขสิทธิ์! ฉันไม่สามารถติดต่อนักออกแบบอื่นจากเว็บไซต์นี้เพื่อขอเวกเตอร์ได้ในขณะนี้

website-design svg save

— อักษณะ
แหล่งที่มา

2

คุณได้รับอนุญาตให้ใช้ / ดัดแปลงโลโก้หรือไม่ คุณอาจพบปัญหาร้ายแรงหากคุณเพียงแค่ไปที่โลโก้ 'ขโมย' เว็บ และหากพวกเขาขอให้คุณเปลี่ยนทำไมไม่ถามพวกเขาถึงไฟล์ต้นฉบับ?

— PieBie

ตอนนี้ฉันทำงานกับสื่อนี้ฉันไม่สามารถเข้าถึงหนึ่งในนักออกแบบของพวกเขาเพื่อขอเวกเตอร์!

— Aksana Zinchanka

ดูเหมือนว่าคุณทำถูกต้องคุณควรจะสามารถบันทึกรหัสเป็น. svg จากนั้นเปิดในโปรแกรมแก้ไขเวกเตอร์ที่รองรับ svg สิ่งนี้ไม่ได้ผล? คุณลองใช้โปรแกรมกราฟิกอะไรบ้าง และสิ่งที่โปรแกรมแก้ไขข้อความ (Mac textedit ชอบที่จะทำลายสิ่งต่าง ๆ ในรูปแบบที่น่าประหลาดใจ)

— user56reinstatemonica8

1

ตามที่ผู้ใช้บอกไว้เพียงวางลงในโปรแกรมแก้ไขข้อความและเพิ่ม.svgไปยังส่วนท้ายของชื่อเมื่อคุณบันทึก logo.svg.txtทั้งนี้ขึ้นอยู่กับการตั้งค่าระบบปฏิบัติการของคุณก็ยังอาจเพิ่มส่วนขยายที่ไม่ถูกต้องเช่น หากเป็นเช่นนั้นเพียงแค่เปลี่ยนชื่อโดยตรง (ไม่บันทึกใหม่) และลบส่วนขยายที่ไม่ถูกต้อง (.txt) .svgโดยพื้นฐานแล้วมันควรจะเปิดอย่างถูกต้องถ้าเต็มปลายชื่อไฟล์ที่มี

— Dom

20

คุณสามารถเรียกใช้รหัสนี้บนคอนโซลจาวาสคริปต์ของคุณ:

var e = document.createElement('script');
e.setAttribute('src', 'https://nytimes.github.io/svg-crowbar/svg-crowbar.js'); 
e.setAttribute('class', 'svg-crowbar');
document.body.appendChild(e);

หรือใช้นี้ bookmarklet ทำงานอย่างสมบูรณ์แบบสำหรับฉัน:

— Anibal
แหล่งที่มา

1

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

— Tom

สิ่งนี้ทำงานได้ดีกว่าสำหรับฉันใน Safari มากกว่าใน Chrome

— MicroMachine

3

ตัวอย่างข้อมูลที่คุณโพสต์ไม่ใช่ XML ที่ถูกต้อง จำเป็นต้องมีการประกาศ XML และ<path>ต้องปิดแท็ก

<?xml version="1.0" encoding="UTF-8"?>
<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>

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

— Scribblemacher
แหล่งที่มา

การคัดลอกด้วย Firefox ทั้งผ่าน Object Inspector (ซึ่งเพิ่ม a </path>) หรือตรงผ่าน Page Source (ซึ่งไม่ได้) ให้ฉัน SVG ที่สามารถเปิดได้ด้วย Illustrator - และดูเหมือนว่าโลโก้บนเว็บไซต์

— usr2564301

3

หากคุณกำลังใช้ Safari บน macOS มีฟังก์ชันการทำงานในตัวสำหรับสิ่งนี้ เพียงคลิกขวาที่ภาพ SVG กด "บันทึกหน้าเป็น ... " ตามด้วยการเลือก "รูปแบบ: แหล่งที่มาของหน้า" ในเมนูแบบเลื่อนลงที่เป็นผลลัพธ์

— เมียร์
แหล่งที่มา

สิ่งนี้ดูเหมือนจะไม่ทำงานหากโลโก้ไม่สามารถเข้าถึงได้โดยใช้รหัส (ตัวอย่างเช่นฝังอยู่ในคลาส) - เมื่อไม่เพียงคลิกขวาอาจทำให้ผู้ใช้โหลดภาพหรือลากและวางลงบนเดสก์ท็อปหรือค้นหานักพัฒนา ทรัพยากรหน้าของเมนู

— MicroMachine

-3

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

คัดลอก URL แล้วเปิดใน Inkscape peasy ง่าย ๆ !

— อเล็กซาน
แหล่งที่มา

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

— Vincent

-4

แน่ใจ ทำให้ซับซ้อนถ้าคุณชอบ - แต่ไม่ใช่ เปิดไฟล์. svg ในหน้าต่างเบราว์เซอร์ใหม่ เลือกพิมพ์ -> บันทึกเป็น pdf -> เปิดในภาพประกอบหรือแอพเวกเตอร์อื่น ๆ :)

— การ์ตูนเบ็นเทน
แหล่งที่มา

5

คุณได้รับ SVG แล้ว - ทำไมต้องเพิ่มความซับซ้อนลงใน PDF?

— Michael Schumacher