新・元地方の中規模印刷会社で苦悩する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

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

  関連記事

Illustrator(イラストレータ)でアピアランスがいちいち適応されるのを防ぐ方法

せっかくの便利な機能「アピアランス」。「これウザい!」となってしまわないように、 …

no image
mixiを上回るコンテンツを。

昨日の東京での打ち合わせの一コマ。

no image
遂に出た!! ネット上のスタンプラリー

かねてから個人的に提唱していたネット上の「スタンプラリー」を ライブドアさんがや …

no image
社長が騒ぎ立てている

お金になることが分かると目の色変えて飛びついてくる。 「ホームページの管理はどう …

no image
続きはWebで。

そろそろ「続きはWebで」について書こうかな。。

no image
3日目。。

移転3日目です。 忙しいといいつつ、ここはしっかり書いているという。。 実際忙し …

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

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

Illustrator(イラストレーター)でマウス操作にSHIFT(シフト)キーやALT(オルト)キーを組み合わせる場合は「マウスクリック」→「キーをプレス」の順番

Illustrator(イラストレーター)を使い始めて約20年、本格的にはここ数 …

no image
WordPress(ワードプレス)導入大作戦!

ぼちぼち問合せもあるプロット・ファクトリー(PLOT-FACTORY)Webサイ …

不況の原因はインターネットに同意

誰もが思いながらも口に出せない事をさらりと言ってしまう。 そこがネットゲリラさん …