HTMLコーディング

【SVGことはじめ その1】SVG形式の画像ファイルを作って表示させてみよう

このあいだ社長の大好きなラフロイグというウイスキーを飲ませてもらい独特の匂いに驚きのけぞったともさんです、こんにちは。

みなさん、svgって知ってますか?
webデザイナーやコーダーなら、知ってる人も多いかなと思いますが、今回はそのsvgについて少し語りたいと思います。

svgとはなんぞや

ウィキペディアでは以下のように説明されてます。

Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG)は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。(Wikipediaより)

簡単に言うと、いつでも編集可能なベクター形式の画像ファイルです。

ちょっと乱暴な気もしますが、おおむねそんな理解で問題ないかなと思います。

svgの歴史

svgって最近出てきたイメージですが、実は開発がはじまったのは1998年です。

古いですよね。
そこから、2001年にSVG1.0がW3C勧告となって、それ以降バージョンが上がっていきます。

それがなぜ今なのか?

大きな理由は、svg未対応だったIE8がサポート終了したことです。
それまでは、IE8も対応に含まなくてはならなかったため、なかなかsvgの使用が進まなかったことが挙げられます。

今年はsvgファイルを使用している企業サイトも多く見られていますし、来年はもっと加速する気がします。

svgを使用している企業サイト

svg使うとすごいと思うところ

svgはほんとに使えるヤツなんですよ。

ベクターデータなので画像がとにかくキレイ

ベクターデータなので画像がとにかくキレイ
ベクターデータなので、拡大縮小しても画像が劣化しません。
レスポンシブ対応での扱いがとても楽なんですよね(`・ω・´)

テキストエディタで編集可能

svgって画像でもありコードでもあるので、実はテキストエディタで編集が可能です。
色やサイズ、座標がすべて設定されているんですねー
変えたい箇所を編集すれば、反映されたりします(笑)

gzipができる

上でも書きましたが、svgはテキストデータでもあるのでgzip圧縮ができます。
svgそのままでも軽量ではあるんですけど、さらに圧縮して軽くすることが可能です。

CSS3やjavascriptを使っていろいろ遊べる

CSS3やjavascriptとの相性がバツグンなので、アニメーションさせたり動かしたりとかいろいろ遊べます。
楽しい(/・ω・)/

svg形式のファイル作成

では、どうやってsvg形式のファイルを作ればよいか?
一番手っ取り早いのは、Illustratorで素材を作成して書き出す方法です。

書き出しのダイアログボックスの「ファイルの種類」で「SVG(*.SVG)」を選択して「OK」をクリック。
書き出し

SVGオプションのダイアログボックスは特にいじる必要はないので、そのまま「OK」しましょう
SVGオプション
「コードを表示」をクリックすると、svgファイルの中身のコードを確認できます。

そして実際に書き出されたsvgファイルが以下です。

<IMG size:200>

<img src="http://takefor.co.jp/wp-content/themes/mag_tcd036/img/post/test.svg" alt="" width="200">

<IMG size:400>

<img src="http://takefor.co.jp/wp-content/themes/mag_tcd036/img/post/test.svg" alt="" width="400">

<inline style>

See the Pen svg inline by tomosan (@tomosan) on CodePen.0

<svg>

See the Pen svg by tomosan (@tomosan) on CodePen.0

いろんな表示方法を試してみました。
状況によって使い分けをしていけば良いかなと思います。

svgタグをhtmlに直接書く方法は、その場で色や大きさの修正がやりやすいので便利ですねー
(`・ω・´)

まとめ

私自身、svgを知って触っていたのが一昨年からですが、業務での使用はまだまだできませんでした。
今後は、業務でもsvgを積極的に利用していきたいですね。

もっとたくさんsvgにしてやろうと目論むともさんでした。

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. HTMLコーディング

    css3だけで立体的でアニメーション付きのボタンを作ろう

    はじめまして、制作チームキャップの徳永です。今年でテイクフォーも4期目に突入し、そろそろ自社サイトでまじめに記事を書いていみようという事になったの…

  2. HTMLコーディング

    EC-CUBE3で自動返信メールが文字化けし、そしてタイトルが途中で切れたときの対処法

    大阪はすっきりしない天気が続いてロードバイクに乗れずテンション下がりまくりのともさんですこんにちは。さて、前回に引き続き今回もEC-CUBE関…

  3. HTMLコーディング

    【PHP】ページ毎に表示を変えるサイドメニューの分岐の方法

    先日会社の人たちと初登山へ行ってきましたが3回ほど盛大にコケてオシリが痛くなったともさんです、こんにちわ。・・・いや、登山楽しかったですよ。次回は…

  4. HTMLコーディング

    棒グラフをcssで表現してみよう

    何かおいしい日本酒銘柄があれば教えて欲しいと思っている、ともさんです。ちなみに、私のおすすめは「美少年」です。先日の案件で、サイト内に棒グ…

  5. HTMLコーディング

    便利すぎるWebフォント「Font Awesome」でサイトの見栄えをワンランクUP!

    今回はWebフォント「Font Awesome」の使い方を紹介します。Font Awesomeとは、Web上でアイコンをフォントとして利用できるW…

  6. HTMLコーディング

    最近流行りの静的サイトジェネレータについて掘り下げてみる【Movable Type編】

    最近、耳をふさがないイヤホンを見つけて衝動買いしてしまったワタクシ、ともさんです。こんにちわ。Bluetoothではないのに、まあまあ高め…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. コピーライティング

    コピーライティング心理学 そのいち ~バンドワゴン効果~
  2. HTMLコーディング

    【PHP】ページ毎に表示を変えるサイドメニューの分岐の方法
  3. レポート

    グリコードを使ってプログラミングを学んでみた!
  4. お客様の声

    【お客様インタビュー】サンキョウプラテック株式会社様
  5. WEB集客

    GoogleがMFI(モバイルファーストインデックス)を発表しました。
PAGE TOP