SVGとSMIL（Scalable Vector Graphics / Synchronized Multimedia Integration Language）

分類: テクノロジ系情報メディア
出る試験: 基本情報応用情報
重要度: ★★★☆☆

どちらもXMLで書く規格。SVGは図形を座標と線で表し、SMILは出す時間と場所を指定する。

もう少し詳しい説明

この2つは、並べて出題されます。どちらもXML（タグを自分で決めて、データの構造を文字で表す言語）で書かれた、W3C（Webの規格を決める団体）の規格だからです。

SVG … 図形を、座標と線で表す
SMIL … いつ、どこに出すかを、時間軸で表す

SVG：描き方を書いておく画像

SVG（Scalable Vector Graphics、スケーラブル・ベクター・グラフィックス）は、図形を座標や線の情報で表す画像形式です。

ふつうの画像と、何が違うのかから見ます。

左右とも、同じ1本の斜め線を表しています。左は方眼の升目を塗って表したもの（ラスタ画像）。升目の数は決まっているので、拡大するとこの階段がそのまま大きくなります。右はSVG。「どこからどこへ引くか」を持っているので、どの大きさで出すときも、その大きさに合わせて右のように引き直せます。

上の図は、左右とも同じ1本の斜め線を表しています。見え方がまるで違います。

左が、方眼紙の升目を塗って斜めの線を表したものです。この方式をラスタ画像（またはビットマップ画像）と呼びます。PNG、JPEG、GIF がこれにあたります。

ラスタ画像は、升目1つずつの色を並べて持っています。写真のように、どこがどんな色かを細かく記録したいものに向きます。

困るのは拡大したときです。升目の数は増えないので、升目が大きくなるだけです。左の階段が、そのまま大きな階段になります。

右がSVGです。升目を持ちません。かわりに「どこからどこへ線を引くか」という指示を持ちます。指示を持っていれば、どの大きさで出すときも、その大きさに合わせて引き直せます。右がどこまで拡大してもなめらかなままなのは、このためです。

建物にたとえます。ラスタ画像は完成した建物の写真です。SVGは設計図です。写真を引き伸ばすとぼやけますが、設計図があれば、どんな大きさでも建て直せます。

持っているものが違う

同じ1本の斜め線を表すのに、何を持っているかの違いです。上はマス1つずつの色をぜんぶ並べて持ち、下は「どこからどこへ線を引くか」という指示を1つ持ちます。指示なら、どの大きさで出すときも、その大きさに合わせて引き直せます。マスの色は引き直せないので、拡大すると階段が大きくなります。

同じ1本の斜め線でも、何を持っているかが違います。

ラスタ画像 … 升目1つずつの色を、ぜんぶ並べて持つ
SVG … 「どこからどこへ線を引くか」という指示を1つ持つ

升目の色は、あとから増やせません。持っている数が決まっているので、拡大すれば1つずつが大きくなるだけです。

指示のほうは、出すたびに引き直せます。大きく出すなら大きく、小さく出すなら小さく、そのつど引きます。

SVGで得られること

指示を持っていることから、いくつかのことができます。

拡大しても粗くならない。 大きさが変わるたびに引き直されます
ファイルが小さくなることがある。図形が少なければ、指示も少なくて済みます
中の文字が文字のまま残る。 検索でも読み上げソフトでも拾えます
一部だけを後から変えられる。 色や線の太さを指定で変えられます

3つめは見落としやすい利点です。ラスタ画像に書かれた文字は色の並びにすぎず、機械には読めません。SVGの文字は文字として入っています。

SVGが向かないもの

写真には向きません。

写真は、1つずつの升目がそれぞれ違う色をしています。これを「どこからどこへ線を引くか」という指示に置き換えると、指示のほうが升目より多くなります。

使い分けは、おおむねこうなります。

向くもの	向かないもの
ロゴ、アイコン、地図	写真
グラフ、図解、イラスト	細かい模様や質感のある絵

SMIL：いつ、どこに出すかを書く

SMIL（Synchronized Multimedia Integration Language、シンクロナイズド・マルチメディア・インテグレーション・ランゲージ）は、複数のメディアを、いつ・どこに出すかを時間軸に沿って書く言語です。スマイルと読みます。

名前の Synchronized は「同期した」という意味です。ばらばらのものを、時間の上でそろえるところが中心にあります。

何を書くのかというと、こういったことです。

0秒から10秒まで、この画像を画面の左に出す
2秒から、この音声を鳴らす
5秒で、この字幕を下に出す

画像・音声・動画・文字は、別々のファイルとして置かれています。SMILはそれらを持ちません。かわりに、どのファイルを、いつ、どこに出すかという台本だけを持ちます。

舞台の進行表のようなものです。進行表に俳優は書かれていませんが、誰がいつ出てくるかは全部決まっています。

2つの共通点

試験では、この共通点が問われます。

	中身	XML（タグで囲んで構造を表す書き方）で書かれているか
SVG	図形の描き方	はい
SMIL	メディアを出す時間と場所	はい

どちらもXMLです。 タグで書かれた文字のファイルなので、テキストエディタで開いて中身を読めます。画像や動画のファイルを開いても、中身は読めません。

XMLで書かれていることの意味は、機械が中身を扱えるところにあります。検索もできますし、プログラムで一部だけを書き換えることもできます。

試験ではこう出る

科目A（旧・午前）の情報メディア分野で出ます。

いちばん多いのは、用語と説明を結び付けさせる問題です。SVG・SMIL・HTML（Webページの中身と構造を書くための言葉）・CSS（Webページの見た目を指定するための言葉）などが並び、どれがどの説明かを選ばせます。

判断の軸は短く済みます。

図形の話 → SVG
時間の話 → SMIL
Webページの中身 → HTML
Webページの見せ方 → CSS

SVGの答えは「図形を座標で表し、拡大しても画質が劣化しない」という表現になります。誤答には升目ごとの色を並べるという書き方が置かれます。これはラスタ画像（PNGやJPEG）の説明です。

SMILの答えは「マルチメディアの再生のタイミングやレイアウトを記述する」です。同期という語が入っていればSMILです。

XMLを土台にした規格を選ばせる形でも出ます。SVG と SMIL のほかに、MathML（数式を表す言語）が並ぶことがあります。どれもXMLで書かれている点が共通です。

ミニクイズ

SVGの説明として、最も適切なものはどれか。

正解は 1番：図形を座標や線の情報で表す画像形式で、拡大しても輪郭が粗くならない

SVGは、図形を座標や線の情報として記述する画像形式です。描き直せる情報を持っているので、拡大しても輪郭が粗くなりません。升目ごとの色を並べるのはラスタ（ビットマップ）画像で、PNGやJPEGがこれにあたります。分かりにくい部分を削って小さくするのは非可逆圧縮の説明です。いつどこに表示するかを時間軸で記述するのはSMILで、SVGと並べて出題されます。

間違えた用語の復習リストを見る →

この分野をまとめて解く → 基礎理論と情報メディアのミニテスト（全39問）

最終更新：2026-11-05