IEにも対応 javaScriptでSVGのpathをアニメーション描画

SVGのpathに沿って線が徐々にのびていき描画しているようにみせるアニメーション。

これは、波線を制御するstroke-dashoffsetの値を大きめに設定し0に近づけていくことで実現でき
CSSのアニメーションでも設定できます。

参考:
SVGでアウトラインをカスタマイズしてみよう | Webクリエイターボックス

が!!
IEはver.11(2016年12月現在の最新版)でもこれに対応していないため
何も表示されていない状態で静止してしまいます。

IEでもSVGをアニメーションさせるには、stroke-dashoffsetの値をjavaScriptのループで少しずつ大きくする形で制御します。

See the Pen SVG path drewing by webdev (@webdev-jp-net) on CodePen.0

Adobe Illustratorで大量のSVGサムネールを書き出す

画像化された文字の見出し、カード型のサムネールや、かるたなど
同フォーマットで文字違いのSVG画像をIllustratorで大量に書き出す場合のコツを紹介します。

基本的には、SVG保存で選べる「アートボードごとに作成」での一斉出力なのですが
アートボードパレットの機能も活用すると、画像を複製してたくさん作る作業もかなり楽になることがわかったので、そちらのほうも紹介します。

サンプルとして、この47都道府県のカードを作ってみました。
コツをつかめば、だいたい20分で作ることができます。

北海道
青森県岩手県宮城県秋田県山形県福島県
茨城県栃木県群馬県埼玉県千葉県東京都神奈川県
新潟県富山県石川県福井県山梨県長野県
岐阜県静岡県愛知県三重県
滋賀県京都府大阪府兵庫県奈良県和歌山県
鳥取県島根県岡山県広島県山口県
徳島県香川県愛媛県高知県
福岡県佐賀県長崎県熊本県大分県宮崎県鹿児島県
沖縄県

“Adobe Illustratorで大量のSVGサムネールを書き出す”の続きを読む

画像ファイルなしCSSだけでSVGを表示

スタイルシートだけでSVG画像を表示する方法です。
画像ファイルを読み込んで表示するのではなく、SVGのコードをBase64でエンコードしてソースに直接埋め込みます。
古いブラウザでは表示できませんので、ご注意を。

  • × InternetExplorer 8 以下
  • × Android 2.3 以下

メリットは、ページ読み込み時のリクエストを減らせること
デメリットは、一見なんの画像を貼り込んでいるのかわからないので、うまく管理しないとカオス化すること…です。

実際のコードはこのようになります。
当ブログの開発環境アイコンに使っているパソコンが表示されています。

<div class="sample">
</div>
.sample:after {
	content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPg0KPHBhdGggZD0iTTMwLDJIMkMwLjg5NiwyLDAsMi44OTYsMCw0djE4YzAsMS4xMDQsMC44OTYsMiwyLDJoMTEuMTk4bC0xLjIxLDRINi45ODRsLTAuNCwyaDE4LjgzbC0wLjM5OC0yaC01LjAwNGwtMS4yMS00SDMwDQoJYzEuMTA0LDAsMi0wLjg5NiwyLTJWNEMzMiwyLjg5NiwzMS4xMDQsMiwzMCwyeiBNMjkuNCwyMEgyLjZWNC42aDI2LjhWMjB6Ii8+DQo8L3N2Zz4=');
}

“画像ファイルなしCSSだけでSVGを表示”の続きを読む