2023.07.30 2023.07.31

SVGの使い方を解説！

3scode.osaka@gmail.com

記事内に商品プロモーションを含む場合があります

こんにちは、まさやんです。

便利なSVGアイコンの取り扱い方法を共有します。

この記事ではSVGアイコンをCSSのcolorとfont-sizeで大きさ、色を制御する方法を解説しています。

この記事を読むと

SVGをアイコンとして簡単に取り扱える
SVGアイコンを再利用可能な状態にできる

ようになります。

では始めます。

デザインカンプからSVGをダウンロードする

まずはデザインカンプからSVGをダウンロードします。

XDの場合は左のレイヤー一覧からアイコンを探します。

アイコンが見つかったら右クリックして

「SVGコードをコピー」を選択します。

コピーをしたら以下のようなコードがコピーされます。

1<svg xmlns="http://www.w3.org/2000/svg" width="19.5" height="15.838" viewBox="0 0 19.5 15.838">
2  <path id="Icon_awesome-twitter" data-name="Icon awesome-twitter" d="M17.5,7.328c.012.173.012.346.012.52A11.293,11.293,0,0,1,6.137,19.218,11.294,11.294,0,0,1,0,17.424a8.268,8.268,0,0,0,.965.049,8,8,0,0,0,4.962-1.707A4,4,0,0,1,2.19,12.995a5.04,5.04,0,0,0,.755.062A4.227,4.227,0,0,0,4,12.92,4,4,0,0,1,.792,9V8.949A4.025,4.025,0,0,0,2.6,9.456,4,4,0,0,1,1.361,4.111,11.36,11.36,0,0,0,9.6,8.293a4.512,4.512,0,0,1-.1-.916,4,4,0,0,1,6.917-2.734,7.868,7.868,0,0,0,2.536-.965A3.986,3.986,0,0,1,17.2,5.88a8.012,8.012,0,0,0,2.3-.619,8.591,8.591,0,0,1-2,2.066Z" transform="translate(0 -3.381)" fill="#222"/>
3</svg>
4

デフォルトのサイズ設定を削除する

svgタグのwidth・height属性を削除する

SVGタグには横幅、高さを指定する属性がついていることが多いです。

今回の場合、

<svg xmlns="http://www.w3.org/2000/svg" width="19.5" height="15.838" ...

のwidthとheightがサイズをしている属性ですので削除しましょう。

pathタグの不要な属性を削除する

今回のpathタグにはid・data-name属性がついていますが使わないので削除しておきましょう。

上記の属性はCSS、JavaScriptで特別なスタイル、動作をさせるためにつけるものですが、今回は不要なので削除で大丈夫です。

pathタグのfill属性の値をcurrentColorに変更する

今回のpathタグについているfill属性はsvgアイコンの色を指定する属性です。

今回は

<path d="..." fill="#222"/>

と指定されていますが

に変更します。

currentColor はテキストのカラーをfillの値に設定するという意味になります。

なので、cssで

svg { color: red; }

とするとアイコンがredになります。

CSSでSVGのサイズを指定する

svgタグに直接サイズを指定しない理由は再利用しやすくするためです。

CSSで以下のようにサイズを指定するとフォントサイズが変更されると自動でフォントサイズと同じ大きさになります。

1svg {
2  width: 1em;
3  height: 1em;
4}

emは指定されているフォントサイズの○倍の大きさという意味です。

もしフォントサイズが16pxだったら、1emは16pxになります。

上記は1emですので、フォントサイズを同じ大きさということになります。

【応用編】SVGアイコンをボタンアイコンとして簡単に取り扱う

これまで解説したことを利用して簡単に制御できる一例を紹介します。

※以下のcodepenはこのまま編集が可能なので、色々触ってみてください！

See the Pen svgの簡単な取扱 by まさやん (@ahndxehg-the-typescripter) on CodePen.

上記ではaタグにcolor,font-sizeを指定しています。

これにより、aタグの子要素であるsvgタグにも同様の設定がされます。

aタグにスタイルを指定するだけでアイコンの大きさ、色を変えられるという便利な状態になりました。

この状態のsvgのコードをコンポーネントとして持っておけば、どこでも使いまわせるようになります。

Web制作の学習はデイトラがおすすめ

私はデイトラのWeb制作コースで学習し、フリーランスとしてこれまでやってきました。

デイトラではデザインカンプからのコーディングを１から教えてもらえます。

テキスト、動画ベースの講座なので場所や時間に縛られず学習できます。

わからない事は質問できる環境もあるので安心して受講できました。

Web制作で転職・独立を考えている方は一度デイトラをチェックしてみてください！

ABOUT ME