[B! SVG][CSS] gt-r-blazeのブックマーク

gt-r-blaze id:gt-r-blaze

SVGとCSSに関するgt-r-blazeのブックマーク (2)

SVGをcss/jsで操作するときに知っておきたいこと - Qiita
はじめに ※SVG初心者向きの記事です SVGはスケーラブルでベクターなグラフィックスです。レスポンシブや高解像度ディスプレイに対応する時にはとても頼もしい存在です。htmlと同じようにcssやjsでの制御も可能なため、インタラクティブなコンテンツもお手の物です。そんなSVGは表示だけであれば簡単ですが、cssやjsを利用する際には知っておきたい基本知識があります。これ以上、私のように時間を浪費してしまう哀れな子鳥たちを増やさぬようメモしたいと思います。ｱｰﾒﾝ目次表示のさせかたに気をつけろ！ cssに気をつけろ！ fill: none;に気をつけろ！ viewBoxに気をつけろ！ jQueryに気をつけろ！サーバーの設定に気をつけろ！表示のさせかたに気をつけろ！ SVGの表示方法は複数あります。 <img>のsrcでファイルを読み込む background-imageプロパテ
gt-r-blaze 2018/06/27
SVG

CSS

Javascript
リンク
画像ファイルなしCSSだけでSVGを表示 – webdev
スタイルシートだけでSVG画像を表示する方法です。画像ファイルを読み込んで表示するのではなく、SVGのコードをBase64でエンコードしてソースに直接埋め込みます。古いブラウザでは表示できませんので、ご注意を。 × InternetExplorer 8 以下 × Android 2.3 以下メリットは、ページ読み込み時のリクエストを減らせることデメリットは、一見なんの画像を貼り込んでいるのかわからないので、うまく管理しないとカオス化すること…です。実際のコードはこのようになります。当ブログの開発環境アイコンに使っているパソコンが表示されています。 <div class="sample"> </div> .sample:after { content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZ
gt-r-blaze 2018/06/27
SVG

CSS

base64
リンク
1