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

    cssでグラデーションを描いてみよう

    年末に向けていろいろと身辺周りが慌ただしくなってきましたね。こんにちは、ともさんです( ^ω^ )グラデーションをcssで描けることはもう…

  2. HTMLコーディング

    高機能で簡単!レスポンシブ対応のjQueryスライダー「bxSlider」を設置してみよう

    もう年の瀬ですね。当社の営業日も実質今日で終わりです。あとは大掃除を残すのみ(/・ω・)/そんな中でのこんなブログ記事です。仕事熱…

  3. HTMLコーディング

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

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

  4. HTMLコーディング

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

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

  5. HTMLコーディング

    【WordPressでGO!】管理画面の左メニューをカスタマイズしてみよう

    皆様あけおめです。ともさんです。あけおめ・・・もう2月ですよ。どうしましょう。なにをしてたんでしょうか。というわけで、今回もはりきってゴー…

  6. HTMLコーディング

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. お客様の声

    【お客様インタビュー】セブンオーセブンモーターサイクル小野様
  2. コピーライティング

    コピーライティング心理学 そのに ~スノッブ効果~
  3. Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    WEBデザイン

    Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法
  4. Yahoo!タグマネージャーを導入してみよう

    WEB集客

    Yahoo!タグマネージャーを導入してみよう
  5. WEBデザイン

    【Photoshop】レイヤーを上手く使い回そう Vo.2リンクオブジェクト編
PAGE TOP