SVG画像をcssのプロパティで色や大きさなどのスタイルを変更する

2018.03.07
プロモーションが含まれています

SVG画像をcssのプロパティで色や大きさなどのスタイルを変更する

SVG画像をhtmlに埋め込み、cssのプロパティで色や大きさなどのスタイルを変更する方法

css関連記事

関連記事をもっとみる

svgのデータは「icooon-mono」さんからのデータをsvgでお借りしました。

スマホアイコン | アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト
6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
icooon-mono.com

デモを用意しました。

SVG画像をcssのプロパティで色や大きさなどのスタイルを変更する
mugenweb-note.com

1.svgをhtmlに反映する

ダウンロードしたsvgをテキストエディタで開きます。
<svg>～</svg>までをコピーし、htmlに貼り付けて保存します。
するとsvgが反映されます。

2.svgにstyleを適用する

html

変更前
<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">

変更後
<svg version="1.1" id="sample2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

css

svg#sample2{
    width: 150px;
}

svgの開始タグにstyleが適用されているので消しちゃいます。
それと他の属性も邪魔なので消しちゃいました。ついでにid名も変更しました。

つぎに上のcss適用するとsvgの大きさが変更できます。

3.pathにもstyleを適用する

html

変更前
<path class="st0" d="M508.省略" style="fill: rgb(75, 75, 75);"></path>
変更後
<path class="blue" d="M508.省略"></path>

css

svg g path{
    stroke-width: 1.5;
    fill-opacity: 1;
}
svg g path.blue{
    stroke: #3187C8;
    fill: #3187C8;
}

svg g path.green{
    stroke: #00BC9C;
    fill: #00BC9C;
}

pathのstyle属性を削除し、class名を変更しました。
それにcssを適用すると色などが変更できます。
下記がsvgのcssプロパティの一部です。

属性名意味
fill塗りの色指定
fill-opacity塗りの透明度
stroke枠線の色指定
stroke-width枠線の太さ
stroke-opacity枠線の透明度

こんな感じでsvgの色や大きさを変えれるようになります。

SVG画像をcssのプロパティで色や大きさなどのスタイルを変更する
mugen00.moo.jp

コメント

タイトルとURLをコピーしました