そんなの見たことがないがSVGファイルのメリット・デメリット未対応ブラウザはSVGをPNGにSVGファイルの作り方SVGを書き出すソフトSVGファイルとはJPEGやPNGのようなビットマップデータではなくイラストレーターなどで扱うベクターデータ。ベクターデータなのでどれだけ拡大してもぼやけずにきれいな状態で表示される。そんなの見たことがないが最近はWebサイトで利用されることが多くなってきているため気付いていないだけで何度か見ているはずです。このブログにあるTwitterとRSSのアイコンはSVGファイルで表示されているため見たことがないということはないはず。SVGファイルなのでどんなに拡大してもぼやけずにきれいな状態で表示されます。拡大してもぼやけずにきれいな状態で表示されるテキストエディタでも編集可能デメリット通常はOSのサムネイル表示で確認できないブラウザによっては表示できない。og:imageが無効)未対応ブラウザはSVGをPNGにデメリットのブラウザ未対応のため表示できない件に関しては代替でPNG画像を表示させるようにすることで対応する。class="svgpng"の箇所の拡張子を.svgから.pngに置換させている。modernizr.jsはSVGが利用可能だとhtmlタグにclass="svg"が自動で付くので注意。}}SVGファイルの作り方SVGは画像ファイルではなく文書データなのでテキストエディタだけでも作成可能。SVGファイルのコードはこのようになっている。d="M40.953,41H34.367A26.88,26.88,0,0,0,26.917,22.2C18.684,13.264,7,13.734,7,13.734V7s15.761-.313,25.485,11.049S40.953,41,40.953,41ZM24.094,25.958C30.211,33.637,29.5,40.924,29.5,40.924H22.918s-0.078-7.209-4.783-11.519A18.193,18.193,0,0,0,7,25.1V18.357S17.978,18.279,24.094,25.958ZM11.783,31.835A4.466,4.466,0,1,1,7.314,36.3,4.468,4.468,0,0,1,11.783,31.835Z"/></svg>このコードはRSSアイコンのものでHTMLに直接記述しても同じように表示できる。#0000ffにすればオレンジのアイコンではなく青のアイコンになる。SVGを書き出すソフトテキストエディタで作成可能だが通常はIllustlatorやPhotoshopでベクター画像を作成してSVGファイルを書き出す。意外と知られていないCSSの色々な回転アニメーションの作成方法iwbjp7@gmail.com。