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

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

  関連記事

フォトショップ(Photoshop)でWebデザイン、角丸シェイプを使うときは「ピクセルにスナップ」にチェック!

Webデザイナーとして当然なんでしょうけど実は知らなかったWebディレクターがこ …

no image
自社のHP

自社のホームページを現在作成中なのであるが、 自由度が高いだけになかなか難しいの …

no image
FireworksのHTML書き出し方法

今となっては昔の話ですが、FireworksでのHTML書き出し時のお話。 忘れ …

Web(ウェブ)でモリサワフォントが使える日がくる

ちょっと前の記事だが、モリサワが「クラウドフォント」に参入するとのニュースがあっ …

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

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

no image
Win版IEにおけるCSSのバグ

最近では当たり前のように使われているCSSですが、 最も多くの人が使っているに違 …

CSS2.1まとめ書き-list-style編(HTML・CSSリファレンス)

CSS2.1まとめ書きは今回のlist-styleで一応最終回にしたいと思います …

no image
出会い系サイト

Webマーケティングの素材集めの一環として、 出会い系サイトに登録してみました。

放送業界全体で初の赤字 【今週のトピック】

「電通」「朝日新聞」「TBS」「日経新聞」に続き、な、なんと放送業界「テレビ・ラ …

DreamweaverとFC2ホームページで作るサイト定義(前編)

前編 → 後編 → 公開編 すみません。学校用のメモとして記事立てさせて頂きます …