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

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

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

  4. HTMLコーディング

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

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

  5. HTMLコーディング

    【WordPressでGO!】WordPressをローカル環境へインストールしてみよう

    あけましておめでとうございます。今年もよろしくお願いいたします。2018年一発目の記事は、WordPressです(≧▽≦)WordPr…

  6. HTMLコーディング

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. HTMLコーディング

    とっても簡単なベーシック認証(Basic認証)のかけ方
  2. お客様の声

    【お客様インタビュー】セブンオーセブンモーターサイクル小野様
  3. HTMLコーディング

    cssでグラデーションを描いてみよう
  4. WEBデザイン

    【Photoshop】ボタントレース方法
  5. HTMLコーディング

    【WordPressでGO!】WordPressの子テーマを作ってみよう
PAGE TOP