内部参照SVGスプライトをCSSでカスタマイズ(IE11対応)
SVG画像をHTMLへ<svg>タグとして設置すると塗りのfillや、線のstrokeなどをCSSから変更することができオンマウスでの色変更にtransitionでアニメーションをつけるなど表現の幅が広がりま …
「svg」の記事一覧
SassでSVGをdata URI schemeで表示させるコード生成
dataURLは通常は外部ファイルを読み込む画像などを、画像ファイルを設置せずコードとして埋め込める仕組みです。 このようなコードになります。HTMLコードだけで1pxの透過GIFから引用しました。 以前、画像ファイルな …
SVGを画像パターンで塗りつぶす
defsを使うとSVGのfill（塗りつぶし）にパターンも定義できます。
サイズが可変のtableのセルに斜線を引くCSS
SVGを活用すると、可変になっている矩形の端から端にスタイルシートでナナメの線を引くことができます。 リキッドの<table>対戦表でセルに斜線を引く場合などでいかがでしょうか。 パソコンのブラウザの場合は、 …
SVGにwidth,heightを指定していないとIEでbackground-sizeより縮小されるバグ
IE11では、レスポンシブ対応のためwidth,heightを指定していないSVG画像をbackgroundに指定した際 画像がbackground-sizeで指定したサイズよりも小さく表示されてしまうバグがあります。 …
SVGをグラデーションで塗りつぶす
Illustratorでグラデーションで塗りつぶしたベクター画像をSVG書き出しすると、 わざわざグラデーション部分をラスタライズ画像として保存しマスキングする構造のSVGを生成してくれます。 せっかくビットマップ画像と …
IEにも対応 javaScriptでSVGのpathをアニメーション描画
SVGのpathに沿って線が徐々にのびていき描画しているようにみせるアニメーション。 これは、波線を制御するstroke-dashoffsetの値を大きめに設定し0に近づけていくことで実現でき CSSのアニメーションでも …
Adobe Illustratorで大量のSVGサムネールを書き出す
画像化された文字の見出し、カード型のサムネールや、かるたなど 同フォーマットで文字違いのSVG画像をIllustratorで大量に書き出す場合のコツを紹介します。 基本的には、SVG保存で選べる「アートボードごとに作成」 …
画像ファイルなしCSSだけでSVGを表示
スタイルシートだけでSVG画像を表示する方法です。 画像ファイルを読み込んで表示するのではなく、SVGのコードをBase64でエンコードしてソースに直接埋め込みます。 古いブラウザでは表示できませんので、ご注意を。 × …