今回は、<img>タグのSVG画像をパス情報を保持したままクリップボードに保存する方法を忘備録として残します📝
はじめに
SVGとは、拡大・縮小しても画像が荒れないベクター形式の画像データです。
普段見かけるJPGやPNG画像は、右クリックして「画像をコピー」することでクリップボードに保存でき、そのままデザインツールにペーストできます。
しかし、SVG画像の場合、同じ操作を行うと.tifなどのビットマップ画像に変換されてしまい、パス情報を保持したまま保存できないことがあります。
そこで、パスを残した状態でクリップボードに保存する手順をご紹介します。
手順
左上のロゴ画像を保存したいと思います。
画像の上で右クリックし、「新しいタブで画像を開く」を選択します。
画像の上で右クリックし、「検証」を選択して検証ツールを開きます。
検証ツール上で該当の要素を右クリックし、「Copy」→「Copy element」を選択します。
デザインツール（FigmaやIllustrator）でペースト（Ctrl+V / Cmd+V）すると、パスを残した状態でそのまま配置できました。
ちなみに
クリップボードではなくFinderに保存したい場合は、JPGやPNG画像と同様に右クリックして「名前を付けて画像を保存…」で大丈夫です。
画像ファイルを開いたページであれば、「別名で保存…」を選択してください。
svg形式（パスを残した状態）で保存できました。
さいごに
以上、プラグインを使わずに<img>タグのSVGデータを保存・利用する方法でした。
いろんな方法があるので、オススメがあればぜひコメントください /
次回は、HTML内に直接記述されている <svg>タグのデータを保存する方法を紹介したいと思います。