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