投稿者 tel | 2014年3月14日

SVGをData URIにしてHTMLに埋め込む

SVGの画像ファイルをData URIにしてimgタグとか背景に使ってみる。

まずSVGファイルをInkscapeで作る。

inkscape_ss

Inkscapeで出力したSVGファイルはそのままだと無駄が多すぎてファイルサイズが大きいので最適化する。

SVGO
https://github.com/svg/svgo

上記のツールを使うとData URIの変換までできる。

svgo –datauri=base64 undo-icon.svg undo-icon.min.txt

テキストにData URIが書かれるので、HTMLに埋め込む。

#undo {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCI+PHBhdGggZD0iTTIuNDEgNC4wMTlsLTIuNDItMi4zOTN2OC4zNzVoOC40NjhsLTIuNDItMi4zOTNzMS43Ni0yLjg5MiA0LjIxMS0yLjI5M2MyLjQ1MS41OTggMS41OCA0LjY0Ni42MjggNy42NzcgMCAwIDIuOTg5LTMuNjIzIDMuMTQ2LTYuNjMzLjE1Ny0zLjAxLTEuODg0LTUuMDcyLTQuMDU1LTUuNDI5LTIuMTcxLS4zNTctNS4wNTcuNzItNy41NTkgMy4wODl6IiBmaWxsPSIjZmZmIi8+PC9zdmc+");
}

http://jsdo.it/sapphire_al2o3/svg-data-uri


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。