例えば <svg>と</svg>で囲まれた、このようなコードがあったとします。

<svg version="1.1" id="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
<path class="st0" d="M509.86,267.434c-2.785-4.717-7.858-7.613-13.338-7.613h-43.677v-108.21c0.014-19.402-7.962-37.293-20.698-49.971c-12.678-12.738-30.57-20.721-49.973-20.699l-194.482-0.007c-6.088,0-11.731,3.222-14.818,8.472c-3.089,5.243-3.178,11.738-0.222,17.062l17.55,31.65c3.792,6.828,10.99,11.072,18.795,11.072h173.178c0.786,0.014,1.17,0.214,1.71,0.703c0.49,0.548,0.696,0.933,0.711,1.718v108.21h-43.678c-5.48,0-10.553,2.896-13.338,7.613c-2.777,4.74-2.858,10.575-0.199,15.374l77.802,140.29c2.726,4.918,7.91,7.969,13.538,7.969s10.812-3.051,13.537-7.969l77.802-140.29C512.719,278.009,512.637,272.174,509.86,267.434z"/>
<path class="st0" d="M321.791,373.873c-3.792-6.835-10.983-11.071-18.796-11.071h-173.17c-0.785-0.014-1.17-0.214-1.711-0.703c-0.488-0.541-0.696-0.926-0.71-1.71v-108.21h43.678c5.473,0,10.553-2.896,13.337-7.613c2.778-4.74,2.859-10.575,0.201-15.374l-77.802-140.29c-2.733-4.918-7.91-7.969-13.537-7.969c-5.629,0-10.805,3.051-13.538,7.969L1.94,229.192c-2.658,4.798-2.577,10.634,0.2,15.374c2.785,4.717,7.865,7.613,13.338,7.613h43.678v108.21c-0.015,19.402,7.961,37.294,20.698,49.972c12.678,12.737,30.57,20.714,49.972,20.69l194.476,0.008c6.086,0,11.73-3.222,14.818-8.472c3.087-5.251,3.177-11.738,0.222-17.07L321.791,373.873z"/>
</svg>

方法① テキストエディタにコピぺする

<svg>から</svg>までを、テキストエディタにコピーし .svg で保存。以上です。

※文字コードは UTF-8にして下さい 。

方法② Illustratorにコピぺする

<svg>から</svg>までをコピーし、イラストレーター上でペーストします。
ベクターデータとして表示されます。

※文字列がそのまま貼り付けられてしまう場合、テキストツールが選択されていないか確認して下さい。選択ツールを選択した状態だと上手く行きます。

方法③(おまけ) 変換ツールを使う

SVG→PNG 変換ツール

svgをpngに変換するサービスですが、svgコードを直接貼り付けられるので、手っ取り早く画像に変換したい方向けですね。
https://lab.syncer.jp/Tool/SVG-Converter/

ちょっと考えると当たり前ですが、いざ必要となると忘れちゃうものです…。
ちなみにこのコードをベクターデータに変換するとリツイートのマークになります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です