Bagaimana cara menyimpan SVG yang ada di situs web ke komputer saya?

16

Saya perlu bekerja dengan logo dari situs web ini (di sudut kiri atas):

masukkan deskripsi gambar di sini

Ini adalah bagian dari kode yang saya salin dari halaman:

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

Saya tidak terlalu ahli dalam hal ini, tetapi sudah mencoba menempelkannya ke file teks dengan menyimpan lebih lanjut sebagai ".svg", tetapi semuanya sia-sia.
(Mungkin ada yang salah dengan tag)

PS: Semuanya baik-baik saja dengan hak cipta! Saya tidak bisa menghubungi perancang lain dari situs ini untuk meminta vektor sekarang.

website-design svg save Aksana Zinchanka
sumber
2
Apakah Anda mendapat izin untuk menggunakan / mengadaptasi logo? Anda dapat mengalami masalah serius jika Anda hanya berkeliling logo 'mencuri' web. Dan jika mereka meminta Anda untuk mengubahnya, mengapa tidak meminta mereka untuk file sumber?
PieBie
Saya sekarang bekerja dengan media ini, saya tidak bisa menjangkau salah satu desainer mereka untuk meminta vektor!
Aksana Zinchanka
Kedengarannya seperti Anda melakukannya dengan benar, Anda seharusnya hanya dapat menyimpan kode sebagai .svg kemudian membukanya di editor vektor yang mendukung svg. Dengan cara apa ini tidak berfungsi? Program grafis apa yang sudah Anda coba? Dan apa editor teks (Mac textedit suka merusak hal-hal dengan cara yang mengejutkan)
user56reinstatemonica8
1
Seperti kata pengguna, tempel saja ke editor teks dan tambahkan .svgke akhir nama saat Anda menyimpannya. Tergantung pada pengaturan OS Anda, mungkin masih menambahkan ekstensi yang salah seperti logo.svg.txt. Jika itu dilakukan, cukup ganti namanya secara langsung (tidak disimpan ulang) dan hapus ekstensi yang salah (.txt). Pada dasarnya, itu harus terbuka dengan benar jika nama file lengkap berakhir dengan .svg.
Dom

Jawaban:

20

Anda dapat menjalankan kode ini di konsol javascript Anda:

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

atau gunakan bookmarklet ini . Bekerja dengan sempurna untuk saya:

masukkan deskripsi gambar di sini

Anibal
sumber
1
Ya ini berfungsi, tetapi mungkin menambahkan komentar yang menjelaskan bahwa proses ini adalah skrip pihak ketiga di laman mereka? Sebuah nytimeskali Script mungkin baik, tapi itu habbit berbahaya untuk mengajar.
Tom
Ini bekerja lebih baik untuk saya di Safari daripada di Chrome
MicroMachine
3

Cuplikan yang Anda poskan bukan XML yang valid. Perlu deklarasi XML dan <path>tag harus ditutup.

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

Bahkan setelah memperbaiki hal-hal itu, jika saya membukanya di Inkscape, bagaimanapun, itu masih tidak terlihat seperti logo di situs web. Anda mungkin lebih baik mencoba sesuatu seperti ini untuk mengekstrak SVG.

Scribblemacher
sumber
Menyalinnya dengan Firefox, baik melalui Object Inspector (yang menambahkan a </path>) atau langsung melalui Page Source (yang tidak) memberi saya SVG yang dapat dibuka dengan Illustrator - dan tampilannya persis seperti logo di situs.
usr2564301
3

Jika Anda menggunakan Safari di macOS, ada fungsionalitas bawaan untuk ini. Cukup klik kanan gambar SVG, tekan "Simpan Halaman sebagai ..." diikuti dengan memilih "Format: Sumber Halaman" di menu drop-down yang dihasilkan.

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

Casimir
sumber
Ini tampaknya tidak berfungsi jika logo tidak dapat diakses melalui kode (misalnya disematkan dalam kelas) - saat tidak hanya mengklik kanan, pengguna dapat melakukan pemuatan gambar, atau seret dan lepas ke desktop atau cari di pengembang. sumber daya halaman menu
MicroMachine
-3

Salin URL kemudian buka di Inkscape. Peasy mudah!

Alexandra
sumber
Halo Alexandra, selamat datang di GDSE dan terima kasih atas jawaban Anda. Bisakah Anda memberi kami sedikit informasi? Bagaimana Anda membuka tautan di Inkscape? Opsi menu apa yang harus dipilih? Misalkan Penanya adalah pemula dalam perangkat lunak dan Anda sebagian besar baik. Terima kasih! Jika Anda memiliki pertanyaan, silakan lihat pusat bantuan atau ping salah satu dari kami di Obrolan Desain Grafis setelah reputasi Anda mencukupi (20). Tetap berkontribusi dan nikmati situsnya!
Vincent
-4

Tentu. Buatlah rumit jika Anda suka - tetapi tidak. Buka file .svg di jendela browser baru. Pilih cetak -> simpan sebagai pdf -> buka di ilustrator atau aplikasi vektor lainnya. :)

Sepuluh Ben
sumber
5
Anda sudah mendapatkan SVG - mengapa menyulitkan dengan menambahkan langkah ke PDF?
Michael Schumacher