webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

SVGの使い方

SVGとは?

SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。
ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。
SVGではアニメーション機能などもサポートしており、Flashで行えるような簡単なインタラクティブコンテンツの作成が可能となっている。
SVGファイルはAdobe社のIllustratorに代表される画像編集アプリケーションで扱うことができるほか、HTMLとの連携を意識して、Webブラウザでも対応が進められている。
ちなみに、SVGXMLベースで策定された言語のため、テキスト形式のファイルで画像を表現するという珍しい形態を取っている。


SVGに対応しているブラウザー


Can I use... Support tables for HTML5, CSS3, etc



ベクターデータで出来ているsvgデータは背景画像で使う事でより使いやすさが増します。
background-sizeで拡大・縮小も自由で出来るので、今後ますます使われる機会が増えていきます。

しかし、サーバーによってはSVGが上手く表示されない場合があります。


svgが表示されない場合の対処法

webcrowの場合

webcrowの場合、無料プランで、「オプションなし」もしくは「容量増加オプション」を選んでしまうと、svgデータが認識されないので、MIMEタイプの指定が必要になります。

MIMEの設定方法

1.サーバー管理ツール内、「MIME設定」をクリックしてください。
f:id:yachin29:20160725031244j:plain


2.「MIME設定追加」をクリック。
f:id:yachin29:20160725031448j:plain


3.以下の2つを「MIMEタイプ」と「拡張子」を入力し「確定する」をクリック

MIMEタイプ:image/svg+xml
拡張子:.svg

MIMEタイプ:image/svg+xml
拡張子:.svgz



サーバーによっては「.htaccess」に以下の文を追加記述する必要があります。

AddType image/svg+xml .svg
AddType image/svg+xml .svgz