使いまわせるSVG
ロゴとかアイコンとかシンボルとか、Webサイトの中のいろいろなところで使われていて、それでいて色違いも必要だったりする小っこい画像たち。みるみる増えてしまってもう仕方ないですね…X(。そんな小っこい画像をひとまとめに管理できる、SVGスプライトについてまとめます。 アイコン一式SVG バラバラのアイコンたちをひとまとめにして、取っ散らかった画像フォルダをスッキリ片付けちまいたいXO！ ということで、例えば、ボタンの矢印とかアイコンとか、ロゴとかシンボルとか、Webサイトの至るところに蔓延（はびこ）る小っこいアイコンを、ひとつのSVGファイルに詰め込んで使いたいやつだけ表示させるやつのつくり方をまとめます。 仕組み 「SVGでやることのまとめ。」という記事で紹介したuse要素を使います。 ひとつのSVGファイルに、アイコンぜんぶを詰め込んで、それぞれにid属性を割り振れば、use要素でお目当
IcoMoonでSVGスプライトを作って設定してみた ｜ Tips Note by TAM
IcoMoonでSVGスプライトを簡単に設定できるようでしたのでやってみました。 目次 ABOUT SVGスプライトとは SVGスプライトを使うメリット なぜIcoMoonで作ったか HOW TO （1） Illustratorでアイコンを作成する （2） IcoMoonでSVGスプライトに必要なファイルを生成する （3） SVGスプライトの設定の仕方 HTMLでの設定方法 WordPressでの設定方法 OTHER 色やサイズをCSSで指定する その他使えるプロパティ ABOUT SVGスプライトとは サイト全体で使用する複数のSVG要素を一つのデータにまとめて、使いたい時に呼び出すというものです。 仕組みは<svg>タグを<defs>タグで囲み外部ファイルにまとめて、<use>タグで呼び出します。 SVGスプライトを使うメリット SVGなので滲まずキレイに表示され、色の変更やサイズ変更
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
