WebサイトにあるSVGをコンピューターに保存するにはどうすればよいですか?


16

このWebサイト(左上隅)のロゴを使用する必要があります。

ここに画像の説明を入力してください

ページからコピーしたコードは次のとおりです。

<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:著作権はすべて大丈夫です!このサイトの他のデザイナーに連絡してベクターを要求することはできません。


2
ロゴを使用/改変する許可を得ましたか?ウェブの「盗む」ロゴをただ見回すだけでは、深刻な問題にぶつかります。そして、もし彼らがあなたにそれを変更するように頼んだら、なぜ彼らにソースファイルを尋ねてみませんか?
PieBie

私は現在このメディアで作業していますが、彼らのデザイナーの一人に手を差し伸べることができません!
アクサナジンチャンカ

あなたはそれを正しくやっているように聞こえます、あなたはただ.svgとしてコードを保存し、svgをサポートするベクトルエディタでそれを開くことができるはずです。これはどのように機能しないのですか?どのグラフィックプログラムを試しましたか?そして、どのテキストエディター(Mac texteditは驚くべき方法で物事を台無しにするのが大好き)
-user56reinstatemonica8

1
ユーザーが言うように、テキストエディターに貼り付けて、.svg保存するときに名前の最後に追加します。OS設定によっては、のような間違った拡張子が追加される場合がありますlogo.svg.txt。その場合は、直接名前を変更して(再保存しない)、誤った拡張子(.txt)を削除します。基本的に、完全なファイル名がで終わる場合、正しく開くはず.svgです。
ドム

回答:


20

JavaScriptコンソールでこのコードを実行できます。

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

またはこのブックマークレットを使用ます。私にとって完璧に働いた:

ここに画像の説明を入力してください


1
はい、これは動作しますが、この実行がサードパーティのスクリプトであることを説明するコメントをページに追加することはできますか?nytimes回のスクリプトは、おそらく大丈夫ですが、それは、ティーチに危険habbitです。
トム

これはChromeよりもSafariの方がうまく機能しました
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で開くと、Webサイトのロゴのようには見えません。おそらく、このようなものを試して、代わりにSVGを抽出した方がよいでしょう。


Firefoxでオブジェクトインスペクター(を追加</path>)またはページソースを直接(これを追加しない)でコピーすると、Illustratorで開くことができるSVGが得られ、サイトのロゴとまったく同じように見えます。
usr2564301

3

macOSでSafariを使用している場合、このための組み込み機能があります。SVG画像を右クリックし、[名前を付けてページを保存...]をクリックして、表示されるドロップダウンメニューで[形式:ページソース]を選択します。

ここに画像の説明を入力してください

ここに画像の説明を入力してください


これは、ロゴがコードを介してアクセスできない場合(たとえば、クラスに埋め込まれている場合)に機能しないようです。メニューのページリソース
MicroMachine

-3

URLをコピーして、Inkscapeで開きます。簡単!


こんにちは、アレクサンドラ、GDSEへようこそ。回答ありがとうございます。もう少し情報を教えてください。Inkscapeでリンクをどのように開きますか?選択するメニューオプション Askerがソフトウェアの初心者であり、ほとんどが上手だとします。ありがとう!ご不明な点がある場合は、ヘルプセンターをご覧いただくか、グラフィックデザインチャットで私たちの1人にpingを送信してください。評判が十分であれば(20)。投稿を続け、サイトを楽しんでください!
ビンセント

-4

承知しました。必要に応じて複雑にしますが、そうではありません。新しいブラウザウィンドウで.svgファイルを開きます。印刷-> PDFとして保存->イラストレーターまたはその他のベクターアプリで開きます。:)


5
すでにSVGを入手しています-PDFにステップを追加することでそれを複雑にしているのはなぜですか?
マイケルシューマッハ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.