新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

WebサイトでSVG画像が普通に使えるようになっていた【Webデザイン】

   

  • このエントリーをはてなブックマークに追加

Web用の画像ファイル形式として有名なのは写真のjpg、イラストのgif、最近では透明も扱えるpngなどが主流になってきているのかもしれません。
そんな中、異質なのがSVGファイル。
なぜ異質かというと、その他のファイルは透明が扱えるなど部分的には違いがあっても作られるファイルはビットマップ形式のデータ。
つまり、解像度を持つドットで作られるデータで小さいデータを拡大するとボヤっとしてしまうなどの問題がありました。

スポンサーリンク
 

一方、SVGファイルはIllustrator等で作られるベクターデータ。
つまり、拡大、縮小してもボヤッとせず、しっかり表示されてくれるデータなんです。
ただ、当然ですが表示されるのはビットマップで表示されるのでファビコンなんかに使うときは注意が必要。
ファビコンにSVGを使うこともできるようですが、むしろビットマップで最適なサイズで作って上げるほうがいいと思います。

そんなSVGファイルですがIEが対応してくれなかったりと結構長い時間待たされていました。
当ブログでも2007年にネタにし、以来、いつ来るのかいつ来るのかと期待しておりましたがいつの間にやら来ていたようです。

対応状況を調べてみましたら、グローバルで97.82%。
もう、ほぼ対応済みと言っていいんじゃないかと思います。

情報源:Can I use… Support tables for HTML5, CSS3, etc

すでにSVGファイルの素材集なんてのもできているみたいですね。

□ SVGのフリー素材 – 素材サイト
□ 小さくてもくっきり見えてすごい!精巧で美しくデザインされたSVGのフリーアイコン素材 -Zondicons

これからは積極的に使っていこうと思います。

 - Illustrator(イラストレータ), Webデザイン , , , , ,

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

no image
製作会社とのつきあい方

最近は某社の校正にはまっていてこれといって新しい展開は見せていないのですが、 数 …

no image
最新のSEOでは?

RSSを使ってBLOGから最新の情報が得られるようになり、 今までネット検索で読 …

no image
SEOコンテストってもうやらないの?

一時期SEOコンテストってのがはやってたみたいですね。

「float」で親要素の高さがなくなってしまったときは親要素に「float」【CSS】

HTML・CSSコーディングで2カラム、3カラムを実装するときに最も使用頻度の高 …

紙サイズ一覧Web対応版

実は僕、印刷会社にいながらもちゃんとした紙のサイズがいえません(汗 そこで、あら …

投稿、固定ページ等、記事が複製できるプラグイン「Duplicate Post」【WordPress】

概ね「livedoor Blog」から「WordPress」への移転には満足して …

no image
理想の携帯サイト

Webサイトと平行して携帯サイトも考えている。

自分のサイト表示がブラウザごとに確認(チェック)できるサイト「browserling」

Web制作する際に困るのが表示確認です。 最近は、W3Cの勧告している仕様に沿っ …

no image
プレゼン結果

たまたま営業と先方の担当が仲良しだったおかげで生き残りました。 まだ、予断は許せ …

Facebookの「いいね!」が減っている。非アクティブなアカウントの削除が進んでいるらしい

以前は、本名以外のアカウントの削除が進められていた時期もありました。 今度は、非 …