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コーディング

    とっても簡単なベーシック認証(Basic認証)のかけ方

    日本酒のひやおろしがおいしい季節になりました、お久しぶりですこんにちわ。ともさんです。久しぶりに業務でベーシック認証(Basic認証)をか…

  3. HTMLコーディング

    tableをCSSのみでレスポンシブ対応にする方法

    テイクフォーにジョインして早3ヶ月が経ちましたがあきらか飲む回数が増えてるともさんですこんにちは。・・・前はそんな、毎週飲むとか、なかったンデスヨ…

  4. HTMLコーディング

    EC-CUBE3でテンプレート適用後にパスが通らなくなってしまったときの対処法

    こんにちわ、ともさんです。みなさん元気ですかそうですか。さて、この前業務でEC-CUBEを触っていた時にとんでもないことが起こりました。…

  5. HTMLコーディング

    社内勉強会を行いました。

    こんにちわ、入社2ヶ月のともさんです。さて、去る9月16日(金)19:00~社内勉強会を行いました。テイクフォーでは初の勉強会となります。…

  6. HTMLコーディング

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    WEBデザイン

    Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法
  2. レポート

    Web担当者に勧めたいマーケティング・セールスコピー書籍BEST5
  3. WEBデザイン

    Photoshopで空模様の画像を作る方法
  4. Yahoo!タグマネージャーを導入してみよう

    WEB集客

    Yahoo!タグマネージャーを導入してみよう
  5. レポート

    願い事が叶うと話題の鈴虫寺に行ってきました!
PAGE TOP