Adobeスクールパートナー(ブロンズ)

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Web

SVGアイコンをCSSで色を替えられるようにしよう

使用ソフト: Illustrator CC 2020、Dreamweaver 2018  

今回はSVGアイコにCSSを適用させて色を変えられるようにする方法を紹介します。


まずはIllustratorでアイコンを作ります。


別名保存でSVGを選択し保存すると「SVGオプション」がでます。
「SVGコード」をクリックしてくだい。


SVGがコードとして変更されますのでコピーしてhtmlに貼り付けます。


貼り付けたら<g></g>など不要な部分を消します。

<style type=”text/css”>
.st0{fill:#F7C0B3;}
</style>

という部分が色を指定しているCSSなのでカラーコードを変更すると色が変えられるようになります。
widthを入れれば大きさも変えられます。
この部分は「.st0{fill:#F7C0B3;}」を抜き出してCSSファイルに書くことも可能です。
※CSSファイルに書く場合はhtmlファイルにある「<style type=”text/css”>.st0{fill:#F7C0B3;}</style>」を消してください。

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Web

    無料!30秒で!グーグルマップの色味を変える方法

    グーグルマップの色味はCSSのfilterプロパティを使って簡単に変え…

  2. Modern Fluid Typography Editor

    Web

    簡単なCSSでフォントサイズをレスポンシブ対応にしよう!

    フォントサイズのレスポンシブ対応WEBサイトをレスポンシブ対応にす…

  3. Flexbox(縦並び)

    Web

    Flexboxで縦並びを簡単に!

    以前、ご紹介しました「Flexboxで横並びを簡単に!」…

  4. Subtle Patterns

    Web

    WEBサイトの背景などに!商用OKの無料テクスチャ素材サイト「Subtle Patterns」の紹介…

    みなさんウェブサイト作りは捗っていますでしょうか?自分はやっとトップペ…

  5. Web

    WEBで使える画像は4つ!ファイルサイズも比べてみた

    WEB用の写真やイラレやフォトショで作った画像を書き出すとき、「とりあ…

  6. Web

    CodePenの使い方を極めよう

    jqueryでスライダーなど調べた際に、出てくる「CodePen」を…

人気の記事

おすすめの参考書

PAGE TOP