🍆

xlink形式のSVG(SVGスプライト)データをネット上から拾いたいとき、どうやって欲しい部分だけを取得するか。

2022/08/17に公開

これが果たして何という名称(SVGスプライト?)なのかは分かりませんが、上記のような形式のSVGを欲しいところだけSVGファイル化する手順をまとめます。

そのSVG素材が表示されているソースを見つけましょう。そうすると、

<svg class="st-Header_Logo_Mark">
  <use xlink:href="#logo"></use>
</svg>

このように xlink:href="#logo" などの記述が見つかります。
この #logo を覚えておきましょう。

ソース内検索で id="logo" で検索するなど、工夫して対象のシンボルが含まれる SVG の記述を見つけてください。

欲しいシンボルを見つけたら Symbol タグの上で右クリックして Edit as HTML をクリックします。HTMLとしてパスを取得できるので、これを全選択でコピーしてください。

コピーしたものはエディタ等で hoge.svg などの名前で新規ファイルを作成してください。

1行目のsymbolタグに <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 183.96 34.1" id="logo"> のような記述があるはずです。 viewBox の値をメモ帳などにコピーしておきましょう。

そして、中に含まれる <path></path> だけを切り取って、全文削除して、切り取った <path></path> を貼り付けます。この貼り付けた <path></path><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 183.96 34.1"></svg> で囲ってあげて完成です。

なお、viewBoxの値は先程メモしたものを貼り付けてください。
これでSVGファイルとして読み込めるようになるので、Figma等で加工して使いましょう。(著作権は確認してね。)

Discussion