2016 06/17 23:59
Category : Trash
自分のサイトで使うためにsvgアイコンを作成中です。今のところスマートフォンサイズの画面で縦向きに表示した場合のみ表示されるようにしています。
最初はUnicode 6.0から導入された絵文字をアイコンがわりに使おうと思っていました。Windows 10、Android、iOSで共通の絵文字なのでどの端末からも見えると思っていたのですが、残念ながら一部のスマートフォンのブラウザから表示されませんでした。なのでsvgでアイコンを書いてみました。
今のところ作ったのは以下の4つのアイコンです。順に、プロフィール用の顔アイコン、日記用のアイコン、Booklogへのリンク用のアイコン、Flickrへのリンク用のアイコンです。
これらのアイコンは、HTMLタグにstyle属性で直接background-imageを指定してbase64へ符号化したインラインSVGを記述して表示しています。eclat cyber cityの「日記 / コラム」では<object>も<svg>も使えなかったのでそうしました。
一番簡単でタグも短く出来たのは丸が2つのFlickrのアイコンでした。SVGタグで書くと次のようになります。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
<path fill="#0063DC" d="m 15,16 c 0,4 -3,7 -6.5,7 -3.5,0 -6.5,-3 -6.5,-7 0,-4 3,-7 6.5,-7 3.5,0 6.5,3 6.5,7 z" />
<path fill="#FF0084" d="M 30,16 A 6.5,7 0 0 1 23.5,23 6.5,7 0 0 1 17,16 6.5,7 0 0 1 23.5,9 6.5,7 0 0 1 30,16 Z" />
</svg>
ベクタイメージですのでブラウザで拡大してもぼやけません。
あと作りたいのは以下のアイコンです。
・ホーム用アイコン
・himajin.net用アイコン
・リンクページ用アイコン
・友達ページ用アイコン
・誕生日ページ用アイコン
・足跡用アイコン
またアイコン作ったら追記します。
最初はUnicode 6.0から導入された絵文字をアイコンがわりに使おうと思っていました。Windows 10、Android、iOSで共通の絵文字なのでどの端末からも見えると思っていたのですが、残念ながら一部のスマートフォンのブラウザから表示されませんでした。なのでsvgでアイコンを書いてみました。
今のところ作ったのは以下の4つのアイコンです。順に、プロフィール用の顔アイコン、日記用のアイコン、Booklogへのリンク用のアイコン、Flickrへのリンク用のアイコンです。
これらのアイコンは、HTMLタグにstyle属性で直接background-imageを指定してbase64へ符号化したインラインSVGを記述して表示しています。eclat cyber cityの「日記 / コラム」では<object>も<svg>も使えなかったのでそうしました。
一番簡単でタグも短く出来たのは丸が2つのFlickrのアイコンでした。SVGタグで書くと次のようになります。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
<path fill="#0063DC" d="m 15,16 c 0,4 -3,7 -6.5,7 -3.5,0 -6.5,-3 -6.5,-7 0,-4 3,-7 6.5,-7 3.5,0 6.5,3 6.5,7 z" />
<path fill="#FF0084" d="M 30,16 A 6.5,7 0 0 1 23.5,23 6.5,7 0 0 1 17,16 6.5,7 0 0 1 23.5,9 6.5,7 0 0 1 30,16 Z" />
</svg>
ベクタイメージですのでブラウザで拡大してもぼやけません。
あと作りたいのは以下のアイコンです。
・ホーム用アイコン
・himajin.net用アイコン
・リンクページ用アイコン
・友達ページ用アイコン
・誕生日ページ用アイコン
・足跡用アイコン
またアイコン作ったら追記します。