xlink形式のSVG(SVGスプライト)データをネット上から拾いたいとき、どうやって欲しい部分だけを取得するか。
これが果たして何という名称(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