IEやEdgeでSVGのサイズが変わってしまう問題の解決法！ | 株式会社キャッチボール・トゥエンティワン
こんにちは！ 以前編集長キックを受けていました。編集者Mです！ 今回はSVGでつまづいたことがありますので、 その問題の解決法を皆様にシェアしちゃいたいと思います！ SVGってすっごく便利ですよね！ ベクターデータで作られている画像なので、 jpgやgifなどと違ってどんなに大きく引き伸ばしてもキレイに表示してくれるんです！ しかも軽い！ ですが、そんなSVGにも落とし穴がありました。 IEやEdgeだとうまくサイズを調整できないッ！！！ 今回はアイコン付きの見出しを作っちゃおうと思い、 backgroundでSVG形式のアイコンを指定し、 background-sizeでアイコンの大きさを指定していました。 HTML
SVGアイコンを簡単に表示できる「Icongram」の使い方
Webデザイナーを悩ませる根深い問題の１つに、アイコンデザインがあります。 アイコンを画像のスライスで作成していくのがいいのか、Font AwesomeのようにWebフォントを利用したほうがいいのか、それともCSSスプライトで表示でしたほうがいいのか。 方法論はたくさんありますが、それぞれにメリットとデメリットを含んでいるため、どれが一番よい解決策なのか迷われている方も多いのではないでしょうか。 そこで注目を浴びているのが、SVGを使ったアイコンの表示です。 PNGやGIFで作ったアイコンと違って、SVGアイコンは高解像度でもギザギザにならず、着色も簡単です。 さらに、SVGアイコンを一番簡単に表示させる方法があります。 今回は、SVGアイコンを一番簡単に表示できる「Icongram」の使い方をご紹介します。 4,000以上のアイコンを簡単に表示することができるので、ぜひ取り入れてみてはい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Phosphor Icons
Potlab Icons — Animated SVG icons for web projects
Ikonate – fully customisable & accessible vector icons
SVG Porn
Happy Friday Space Travelers
IcoMoon App
アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
