お品書き
書き直し中…
とりあえず、中へどうぞ
↓↓↓
スポンサーリンク

SVGの画像をそのまま使う

2017.12.17
WEBデザイン
CSSGIMPInkScape
フリーソフトのInkScapeを使うと、SVGと言う形式で保存することになる。

InkScapeというのは、AdobeのIllusratorのフリー版みたいなソフトですね

SVGとはScalable Vector Graphicsの略だそうで。

いわゆるベクター画像ですね

（有料ソフトのAdobe Illustratorでも同様の形式で保存できるんじゃないかと思いますが、使ったことないので知りません。）

いままでは、InkScapeで作成した画像は、いちいちPNGにエクスポートして、その後必要であればGIMPで加工したり変換したりしていました。

しかし、このSVG画像、ブラウザでそのまま表示できるのですよね。

知ってはいましたが、古いブラウザでは表示できなくなると言うことで、PNGとかJPGとかGIFとかに変換していたのですが・・・・

時は流れ、最近のブラウザであれば、ほぼ表示できないものはないような状況になってきているので、そろそろ、そのまま使っても良いかな？と思いまして

（InkScapeの使い方に慣れてきた事もあります）

☆以下の画像はSVG画像をそのままUPLOADしてIMGタグで表示させています。



（もし表示できてない場合は古いブラウザを使っている事と思います。）


各ブラウザの対応状況
ブラウザ名SVGに
対応している
バージョン
Internet Explorer9.0以上
Firefox3.0以上
Chrome4.0以上
Safari5.1以上
Opera9.0以上
iOS Safari3.2以上
Opera Mini5.0以上
Android Browser3.0以上
Blackberry Browser7.0以上
Internet Explorer Mobile10.0以上
もう今ではほとんど使われていないような古い版ばかりですね。

※ただし、FACEBOOK・Twitterでは表示できない模様、なのでOGP画像はPNGで作っておいたほうが良いようです。

ベクターグラフィックスだと画像の修正が楽でよいですね。。。

ただ、スクリプトを仕込んで実行できる可能性があるとかで、セキュリティ的にはあまり推奨はされないようです。

んー、やっぱりPNGにしとくか・・・？
ちなみに、SVGが扱えるフリーソフトはたくさんあるようです
⇒SVGを制作できるアプリ,お絵描きソフトを徹底的に調べました！ 114個

スクリプトが実行できると書いたとおり、SVGって、単なる画像ではなく様々な情報が記述されているフォーマットのようで、単なるお絵かきソフトではなく、エディターみたいなものが多いようですね。お絵かきソフトとしてはやはりInkScapeが挙げられておりますね。

コメント