---
title: "SMILとは？読み方・意味と.smil・.smiの違い、SVGアニメーションの書き方"
url: "https://www.issoh.co.jp/column/details/7654/"
published: 2025-07-11
updated: 2026-10-20
categories: ["Webサイト"]
publisher: "株式会社一創"
---

# SMILとは？読み方・意味と.smil・.smiの違い、SVGアニメーションの書き方

SMIL（スマイル）は、動画・音声・画像・テキストを時間軸の上に並べて同期再生させるための、W3Cが勧告したXMLベースのマークアップ言語です。いま実際に書かれているのは、SVGの中で図形を動かす`<animate>`などのアニメーション要素と、EPUBの読み上げ同期です。検索すると英単語のsmileや同名の美容室が混ざるため、この記事ではW3C勧告とMDNのブラウザ互換データを根拠に、意味と読み方、.smilと.smiの違い、SVGでの書き方と制御をChrome 155で動かした結果まで整理します。

## まとめ：SMILの現在地と、いま押さえる5点

- 正式名称はSynchronized Multimedia Integration Language（同期マルチメディア統合言語）。仕様書が「pronounced smile」と書いており、読みは「スマイル」です。最新版はSMIL 3.0（2008年12月1日勧告）で、策定グループは2012年4月1日に閉鎖され、仕様は凍結されています。
- 拡張子は.smilを選びます。.smiはMicrosoftのSAMI字幕と共用で、手元の.smiが字幕ならFFmpegでSRTやWebVTTに変換できます。MIMEタイプはapplication/smil+xmlです。
- SVGのSMILアニメーションは非推奨ではありません。Chromeは2015年の廃止予告を2016年8月に保留し、その後も廃止していません。対応開始版はanimateがChrome 2・Firefox 4・Safari 3.1、animateMotionがChrome 19・Firefox 4・Safari 6です。
- ただしSMILでしかできないことは減りました。imgで読み込んだSVGでもSVG内のCSSアニメーションは動き、パス追従もCSSのoffset-pathで書けます。SMILが今も有利なのは、Safariを含めてパスの形そのものを変形させる場面です。
- 単体のSMILプレゼンテーションを新規に作る理由はほぼありません。SMILは主にEPUB 3のMedia OverlaysやDAISY図書といった別の規格に組み込まれて使われています。携帯電話のMMSも2006年のRelease 6ではSMILが前提でしたが、2024年のRelease 18ではHTML5が中心です。

以下、根拠と書き方を順に見ていきます。

## SMILの意味と読み方、W3C勧告としての位置づけ

### 仕様書が明記する読みは「スマイル」、意味は同期マルチメディア統合言語

SMILはSynchronized Multimedia Integration Languageの頭字語で、日本語では同期マルチメディア統合言語と訳されます。読み方は仕様書に書かれています。[SMIL 2.1勧告](https://www.w3.org/TR/SMIL2/)のAbstract冒頭が「the Synchronized Multimedia Integration Language (SMIL, pronounced smile)」と書いており、W3C自身が英単語のsmileと同じ発音を指定しています。

言語としてはXMLアプリケーションの一つです。[SGMLから派生したXMLの系譜](/column/details/8044/)に連なり、要素と属性で構造を記述する点は[WPFのUIを記述するXAML](/tech/details/7598/)と同じ考え方に立っています。SMILの特徴は、メディアの再生時間と同期に加えて、画面上の配置も記述できる点です。「この動画が始まって5秒後に画像を出す」をタグで書ける、と捉えると早く掴めます。

### 策定組織SYMM WGは2012年4月1日に閉鎖済みで仕様は凍結

SMILを策定していたのはW3CのSynchronized Multimedia Working Group、通称SYMM WGです。[同グループのホームページ](https://www.w3.org/AudioVideo/)には「The SYMM WG is closed since 01 April 2012.」と明示されています。

SMILは廃止された規格ではなく、改訂が止まった規格です。SMIL 3.0は仕様上の動作を確認する基準になります。ただし、実際の再生結果は実装の対応範囲や不具合、参照するメディアにも左右されるため、対象環境での確認が必要です。仕様に新機能が足される見込みはないため、ブラウザ実装の拡充を期待して採用するのは筋が悪い選択です。

## .smilと.smiの違い、SAMI字幕の.smiを開く・変換する方法

### .smiはSAMI字幕・Macintosh自己マウントイメージと共用の拡張子

SMILファイルの拡張子には.smilと.smiの両方が使われてきました。新規に作るなら.smilを選んでください。.smiは、Microsoftの字幕形式SAMI（Synchronized Accessible Media Interchange）と、Macintoshの自己マウントイメージ（self mounting image）でも使われているからです。[MicrosoftのSAMI 1.0解説](https://learn.microsoft.com/en-us/previous-versions/windows/desktop/dnacc/understanding-sami-1.0)は「SAMI documents must use the following extensions: .smi or .sami」と定めています。

手元の.smiがどれかは、テキストエディタで先頭を見れば判別できます。`<SAMI>`で始まりHTMLに似た`<SYNC Start=1000>`のようなタグが並んでいればSAMI字幕、XML宣言のあと`<smil>`要素がルートならSMILです。テキストとして開けないバイナリなら、Macintoshのディスクイメージを疑ってください。動画に付いてきた.smiファイルなら、まずSAMI字幕かどうかを内容で確認してください。

### SAMIの.smiをFFmpegでSRT・WebVTTへ変換する手順

SAMI字幕は今の動画プレーヤーや動画サイトでは扱いにくいので、SRTかWebVTTに変換するのが実用的です。FFmpegは読み込み側にSAMIのデマルチプレクサを持っています。FFmpeg 9.0.2（macOS用の静的ビルド）で、2つの字幕を持つSAMIファイルを変換した結果が次のとおりです。

```
# UTF-8で保存されたSAMIをSRTとWebVTTへ
ffmpeg -i sample.smi sample.srt
ffmpeg -i sample.smi sample.vtt

# Shift_JISで保存された日本語SAMIは文字コードを指定する
ffmpeg -sub_charenc CP932 -i sample_sjis.smi sample.srt
```

```
1
00:00:01,000 --> 00:00:03,500
こんにちは、SAMI字幕です。

2
00:00:04,000 --> 00:00:07,000
2行目の字幕
改行あり
```

SAMIの`Start=1000`はミリ秒で、`&nbsp;`だけを含むSYNCのStart値が、直前の字幕の表示終了時刻になります。`<br>`は改行に変わりました。このサンプルでは「Error decoding subtitles: Operation not permitted」が1行出たものの、字幕2件の時刻と本文は一致しました。別のファイルでも無害なエラーとは限らないため、変換後は字幕の件数・時刻・本文を入力と照合してください。

詰まりやすいのは文字コードです。日本語のSAMIはShift\_JISで配られていることが多く、指定なしで変換すると「Invalid UTF-8 in decoded subtitles text; maybe missing -sub\_charenc option」と出て、字幕が1件も書き出されませんでした。[FFmpegのコーデック文書](https://ffmpeg.org/ffmpeg-codecs.html)が字幕デコード用に定める`-sub_charenc`を入力ファイルの前に置くと、正しく変換できます。FFmpeg自体の導入と基本コマンドは[FFmpegの使い方とコマンド一覧](/tech/details/5023/)にまとめています。

### MIMEタイプはapplication/smil+xml、旧application/smilは廃止扱い

SMILをサーバーから配信する場合、Content-Typeは`application/smil+xml`を使います。[IANAのメディアタイプ登録簿](https://www.iana.org/assignments/media-types/media-types.xhtml)では、smilの項目に「smil (OBSOLETED in favor of application/smil+xml)」と注記され、どちらもRFC 4536に基づく登録です。古いWebサーバー設定に`application/smil`が残っていれば、書き換えの対象になります。

## SMIL文書の基本構文：parとseqの時間コンテナ、regionによる表示位置

### smil・head・bodyの骨格とpar・seqの入れ子

SMILの文書構造はHTMLに似ています。ルートの`smil`要素の下に`head`と`body`を置き、headにレイアウトやメタ情報、bodyに再生内容を書きます。時間の制御は2つの要素が担います。`par`は子要素を同時に再生する並列コンテナ、`seq`は上から順に再生する逐次コンテナです。この2つを入れ子にすると、「動画を流しながら、字幕だけを順番に切り替える」といったタイムラインになります。

SMIL 3.0では要素の識別子に`xml:id`を使います。仕様のStructure章が、従来の`id`属性はSMIL 3.0で非推奨になったと明記しているためです。

```
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/ns/SMIL" version="3.0" baseProfile="Language">
  <head>
    <layout>
      <root-layout width="640" height="480" backgroundColor="black"/>
      <region xml:id="video" top="0" left="0" width="640" height="360"/>
      <region xml:id="caption" top="380" left="0" width="640" height="100"/>
    </layout>
  </head>
  <body>
    <par>
      <video src="lesson01.mp4" region="video" dur="30s"/>
      <seq>
        <text src="cap01.txt" region="caption" dur="12s"/>
        <text src="cap02.txt" region="caption" dur="18s"/>
      </seq>
    </par>
  </body>
</smil>
```

この例では、30秒の動画と字幕の並びが同時に始まり、字幕側だけが12秒で切り替わります。名前空間は`http://www.w3.org/ns/SMIL`で、後述するEPUB 3のMedia Overlaysも同じ名前空間を使います。

### layout・regionによる表示領域の定義とメディアへの割り当て

画面配置はhead内の`layout`要素にまとめます。`root-layout`が表示領域全体の大きさ、`region`がその中の矩形です。各regionに識別子を振っておき、bodyのメディア要素側で`region`属性から参照します。CSSのようにセレクタで後から当てるのではなく、要素ごとに領域を明示する設計です。

bodyに置けるメディア要素は`video`、`audio`、`img`、`text`、`textstream`、`brush`、`animation`、そして種別を問わない`ref`です。SMIL 3.0ではsmilText系の要素群が新設され、外部ファイルを用意せずに文書内へ直接字幕テキストを書けるようになりました。

## SVGでSMILアニメーションを書く：4つの要素と時間指定の属性

### animate・set・animateTransform・animateMotionの役割

ブラウザで動くSMILは、SVGの中に置くアニメーション要素です。[MDNのSMILによるSVGアニメーション解説](https://developer.mozilla.org/ja/docs/Web/SVG/Guides/SVG%5Fanimation%5Fwith%5FSMIL)が扱うのもこの範囲で、要素は4つあります。

| 要素               | 動かすもの               | 主な属性                         |
| ---------------- | ------------------- | ---------------------------- |
| animate          | 数値・色などの属性値          | attributeName・from・to・values |
| set              | 属性値を指定時刻に切り替える      | attributeName・to・begin       |
| animateTransform | transform（回転・拡大・移動） | type・from・to                 |
| animateMotion    | パスに沿った位置            | path・rotate                  |

時間を決める属性は共通です。`dur`が1回の長さ、`begin`が開始時刻、`repeatCount`が繰り返し回数（`indefinite`で無限）、`fill="freeze"`が終了後に最後の値で止めるかどうかを決めます。次のSVGを用意し、Chrome 155のヘッドレス実行で`pauseAnimations()`と`setCurrentTime()`を使って各時刻の値を読み取りました。

```
<svg id="s" xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200">
  <circle id="c1" cx="20" cy="30" r="10">
    <animate id="a1" attributeName="cx" from="20" to="180" dur="2s" fill="freeze"/>
  </circle>
  <circle id="c2" cx="20" cy="60" r="10">
    <animate attributeName="cx" from="20" to="180" dur="2s" begin="a1.end" fill="freeze"/>
  </circle>
  <circle id="c3" cx="20" cy="90" r="10">
    <animate attributeName="cx" from="20" to="180" dur="2s"/>
  </circle>
  <rect id="r1" x="10" y="110" width="20" height="20" fill="red">
    <set attributeName="fill" to="blue" begin="1s"/>
  </rect>
  <rect id="r2" x="60" y="110" width="20" height="20">
    <animateTransform attributeName="transform" type="rotate"
      from="0 70 120" to="360 70 120" dur="4s" repeatCount="indefinite"/>
  </rect>
  <circle id="m" r="5">
    <animateMotion path="M20,170 L220,170" dur="2s" fill="freeze"/>
  </circle>
</svg>
```

| 時刻   | c1 cx | c2 cx（a1.end開始） | c3 cx（freezeなし） | r1 fill | m のx位置 |
| ---- | ----- | --------------- | --------------- | ------- | ------ |
| 0.5秒 | 60    | 20              | 60              | 赤       | 70     |
| 1秒   | 100   | 20              | 100             | 青       | 120    |
| 2秒   | 180   | 20              | 20              | 青       | 220    |
| 3秒   | 180   | 100             | 20              | 青       | 220    |
| 5秒   | 180   | 180             | 20              | 青       | 220    |

読み取れることは3つあります。`fill="freeze"`を付けないc3は、2秒の終了と同時に元の20へ戻ります。止めたい位置で終わらせるなら`freeze`は必須です。`begin="a1.end"`のc2は、a1が終わる2秒まで動かず、そこから2秒かけて180へ進みました。要素のidと`.end`・`.begin`を組み合わせると、JavaScriptなしで順番に動くアニメーションを組めます。`set`は補間せず、1秒の時点で赤から青へ切り替わりました。

### beginElement・pauseAnimationsによるJavaScript制御

SMILアニメーションはJavaScriptからも制御できます。`begin="indefinite"`にしておくと自動では始まらず、`beginElement()`を呼んだ時点から再生されます。SVG全体の時計は`svg`要素の`pauseAnimations()`・`unpauseAnimations()`・`setCurrentTime(秒)`で操作します。次のcircle要素2つを前の例のsvg要素内に追加し、script要素はそのsvg要素より後に置きます。

```
<circle id="k" cx="250" cy="30" r="10">
  <animate id="ka" attributeName="cx" from="250" to="290" dur="1s"
    begin="indefinite" fill="freeze"/>
</circle>
<circle id="cl" cx="250" cy="80" r="10">
  <animate attributeName="r" from="10" to="20" dur="1s" begin="click" fill="freeze"/>
</circle>

<script>
  const svg = document.getElementById('s');
  const k = document.getElementById('k');
  const c1 = document.getElementById('c1');
  svg.pauseAnimations();
  svg.setCurrentTime(1);
  document.getElementById('ka').beginElement();  // 1秒の時点で開始
  svg.setCurrentTime(1.5);
  console.log(k.cx.animVal.value);   // 270（250から290への中間）
  console.log(c1.cx.baseVal.value);  // 20（属性値そのものは書き換わらない）
</script>
```

Chrome 155では、`beginElement()`から0.5秒後のcxが270になり、`begin="click"`の円はクリック後に半径が10から20へ変わりました。注意したいのは、アニメーション中の値が`animVal`に入り、`baseVal`（属性値そのもの）は20のままだという点です。`getAttribute('cx')`で現在位置を取ろうとすると、動いていないように見えます。

## SVGのSMILは非推奨ではない：Chrome廃止予告の保留と、CSSとの使い分け

### SVGアニメーション要素ごとの対応開始版と非推奨状態

「SVGのSMILアニメーションは主要ブラウザで削除された」という説明を今も見かけますが、事実と異なります。MDNのブラウザ互換データの原本である[browser-compat-dataのanimate.json](https://github.com/mdn/browser-compat-data/blob/main/svg/elements/animate.json)では、`deprecated`は`false`、対応開始はChrome 2、Firefox 4、Safari 3.1です。set・animateTransform・animateMotionもすべて`deprecated: false`でした。

誤解の出どころははっきりしています。Chromeチームは2015年、保守コストとWeb Animations APIとの機能重複を理由にSMILの廃止予告をblink-devへ投げました。しかし代替手段がないという開発者側の反発を受け、2016年8月に「we’ve decided to suspend our intent to deprecate」と廃止予告の保留を表明しました（[W3Cのwww-svgメーリングリストへの転載](https://lists.w3.org/Archives/Public/www-svg/2016Aug/0038.html)で原文を確認できます）。以後、Chromeは廃止に進んでおらず、互換データの`deprecated`も`false`のままです。廃止予告を伝える古い記事を読んだときは、日付と現在の互換データを突き合わせてください。SVG側でもSVG Animations Level 2が「a set of features based on SMIL for declaratively animating SVG content」として編集者草案（2025年9月14日付）で維持されていますが、勧告ではありません。

### img内のSVGにおけるCSSアニメーションの動作検証（Chrome 155）

SMILを選ぶ理由として「imgタグやbackground-imageで読み込んだSVGではSMILしか動かない」と書かれることがあり、この記事の旧版も同じ説明をしていました。実測すると正確ではありません。同じ円を動かすSVGを3通り作り、`<img src="...">`で読み込んで0.7秒間隔の2枚のスクリーンショットを比べました。

| SVG内の書き方                       | img内で動いたか | 変化した画素数 |
| ------------------------------ | --------- | ------- |
| SMIL（animate）                  | 動いた       | 968     |
| SVG内の<style>に書いたCSS @keyframes | 動いた       | 972     |
| SVG内の<script>（setInterval）     | 動かない      | 0       |

imgで読み込んだSVGで止まるのはスクリプトで、SVGファイルの中に書いたCSSアニメーションは動きます。外側のページのCSSが効かないのは事実ですが、それはSMILを選ぶ理由になりません。

### CSSのoffset-pathによるパス追従とSMILによるパス形状の補間

パスに沿って動かす表現も、今はCSSで書けます。browser-compat-dataによると、[CSSのoffset-path](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/offset-path)はChrome 55、Firefox 72、Safari 15.4から対応しています。一方、パスの形そのものを補間するCSSの`d`プロパティはChrome 52とFirefox 97が対応し、Safariは未対応です。Safariを含めて図形の輪郭を別の形へ変形させたいなら、`<animate attributeName="d">`で書くSMILが残る選択肢になります。

判断はこう整理できます。HTMLに埋め込んだインラインSVGや、imgで読み込むアイコンを動かすだけなら、CSSのanimationで書いてください。DevToolsのアニメーション検査が使え、HTML側と書き方が揃います。インラインSVGで再生位置や一時停止をJavaScriptから細かく制御したいなら、Web Animations APIを検討できます。imgとして読み込んだSVG内部のアニメーションは、ページ側から同じようには制御できません。SMILが向くのは、Safariを含めたパスの変形、既存SVGの保守、開始・終了時刻を参照するアニメーションの連鎖をスクリプトなしで書きたい場合です。SVGのアニメーションはSMIL本体とは別に仕様が扱われているため、新規採用は必要な機能と対象ブラウザの対応状況で判断してください。

## SMILの組み込み用途：EPUB 3・DAISY・従来の携帯MMS

### EPUB 3.3のMedia OverlaysはSMIL 3.0のサブセット

電子書籍のEPUBは、SMILを規格に組み込んでいる用途の一つです。[EPUB 3.3](https://www.w3.org/TR/epub-33/)は2026年1月13日付でW3C勧告として公開されており、その第9章が定めるMedia Overlaysは「a subset of \[smil3\]」、すなわちSMIL 3.0の部分集合であると明記されています。本文のXHTMLと朗読音声を文単位で対応づけ、読み上げに合わせて該当箇所をハイライトする機能です。

使う要素は`smil`、`head`、`metadata`、`body`、`seq`、`par`、`text`、`audio`の8つだけです。`smil`要素には`version`属性が必須でその値は`3.0`、`head`は省略可、`par`の子として`text`が必須、`audio`は任意という構成です。

```
<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/ns/SMIL"
      xmlns:epub="http://www.idpf.org/2007/ops" version="3.0">
  <body>
    <seq epub:textref="chapter01.xhtml" epub:type="chapter">
      <par id="p1">
        <text src="chapter01.xhtml#sent1"/>
        <audio src="audio/ch01.mp3" clipBegin="0s" clipEnd="4.512s"/>
      </par>
      <par id="p2">
        <text src="chapter01.xhtml#sent2"/>
        <audio src="audio/ch01.mp3" clipBegin="4.512s" clipEnd="9.870s"/>
      </par>
    </seq>
  </body>
</smil>
```

EPUBでは識別子に`xml:id`ではなく`id`を使う点に注意してください。SMIL 3.0本体の推奨とは逆です。読み上げ順序をどう設計するかは、[スクリーンリーダーでの読み上げ順序の設計](/tech/details/16505/)と考え方が共通します。

### DAISY図書とSMIL 3.0 DAISYプロファイル

視覚障害や読字障害のある人向けのデジタル録音図書規格DAISYも、初期からSMILを基盤にしてきました。DAISY 2.02仕様のAbstractは「The DAISY format is based on the W3C defined SGML (ISO 8879) applications XHTML 1.0 and SMIL 1.0.」と書いており、後継のDAISY 3（ANSI/NISO Z39.86）ではSMIL 2.0に移行しました。

[SMIL 3.0](https://www.w3.org/TR/SMIL3/)はDAISY専用のプロファイルを標準の一部として持っています。既存プロファイルが合わない理由を、仕様は「The full language profile is too large to be considered practical, while the Tiny profile lacks certain timing, state, and media object modules required by DAISY.」と説明しています。5つのプロファイルのうち、特定の応用分野のために設けられたのはDAISYだけです。同じ層に向けた読書支援機器としては、[点字ディスプレイの仕組みと給付基準](/column/details/7631/)も制度上の給付対象になっています。

### 携帯MMSの3GPP SMIL Language ProfileとRelease 18でのHTML5への移行

携帯電話のMMS（マルチメディアメッセージングサービス）は、従来SMILで画面と再生順を記述してきました。[3GPP TS 26.140 V6.3.0（Release 6・2006年3月）](https://www.etsi.org/deliver/etsi%5Fts/126100%5F126199/126140/06.03.00%5F60/ts%5F126140v060300p.pdf)の4.10節は「The 3GPP MMS uses a subset of SMIL 2.0 for media synchronization and scene description.」と定め、メディア同期に対応するMMSのクライアントとサーバーに3GPP SMIL Language Profileへの対応を「shall」で求めています。このプロファイルはTS 26.246で定義され、SMIL 2.0 Language Profileの部分集合かつSMIL 2.0 Basic Language Profileの上位集合です。画像とテキストを1画面に並べて順に送る表示は、parとseqで表現できます。

同じ4.10節は版を重ねて書き換わっています。[V18.0.0（Release 18・2024年5月）](https://www.etsi.org/deliver/etsi%5Fts/126100%5F126199/126140/18.00.00%5F60/ts%5F126140v180000p.pdf)では、HTMLに対応するMMSのクライアントとサーバーに3GPP HTML5プロファイルへの対応を「shall」で求め、SMILについてはサーバーがHTML5へ変換することを「should」としています。MMSでSMILを扱うのは、Release 6前後の仕様に沿った端末やデータを相手にする場合です。

## SMIL 1.0から3.0までの勧告日と、新規採用の判断

### 版ごとの勧告日と追加された機能

| 版        | W3C勧告日      | 主な追加                              |
| -------- | ----------- | --------------------------------- |
| SMIL 1.0 | 1998年6月15日  | par・seq・switch、layout・region      |
| SMIL 2.0 | 2001年8月7日   | モジュール化、animate系、transition、excl   |
| SMIL 2.1 | 2005年12月13日 | モバイル向けプロファイル                      |
| SMIL 3.0 | 2008年12月1日  | smilText、State、xml:id、DAISYプロファイル |

SMIL 1.0の仕様本文にはexcl・animate・transitionのいずれも登場せず、これらは2.0以降の追加です。SVGが参照しているアニメーション機能は、SMIL本体とは別に切り出されたSMIL Animation勧告（2001年9月4日）です。参照すべきはSMIL 3.0で、勧告文中に「This SMIL3.0 W3C Recommendation supersedes the 13 December 2005 SMIL 21 Recommendation.」と後継関係が書かれています。

### 新規採用を避けるべき場面と、代わりに選ぶ規格

SMIL文書そのものを再生できる環境は限られます。W3Cのマルチメディア関連ページが挙げる対応プレーヤーは、SMIL 3.0がAMBULANT 2.0、SMIL 2.1と2.0がAMBULANTとRealPlayerで、どれも一般の利用者の端末に標準で入っているものではありません。

Webサイトの訪問者に見せるプレゼンテーションやスライドショーを、単体のSMILファイルとして新規に作るのはやめてください。再生にプレーヤーの導入を要求する時点で成立しません。動画と字幕を同期させたいならHTMLのvideo要素と[WebVTT](https://www.w3.org/TR/webvtt1/)、装飾的なアニメーションならCSSかWeb Animations APIが、追加インストールなしで動きます。

SMILの知識が要るのは、既存資産に触れる場合です。EPUBのMedia Overlaysを自作するとき、DAISY図書を制作・変換するとき、SMILで書かれた従来のMMSのデータを扱うとき、SMIL入りのSVGを保守するとき。音声同期や字幕をアクセシビリティ要件として整えたいなら、[WCAG 2.2の達成基準](/column/details/7577/)のうち時間依存メディアを扱うガイドライン1.2（字幕・音声解説）から確認するほうが早く進みます。サイト全体の診断から改修までを外部に任せる場合は、[Webアクセシビリティ対応の支援内容](/service/web/accessibility/)も比較材料になります。

## よくある質問

### 応用情報技術者試験ではSMILはどのように出題されましたか？

平成28年度秋期の応用情報技術者試験 午前 問25で、「動画や音声などのマルチメディアコンテンツのレイアウトや再生のタイミングをXMLフォーマットで記述するためのW3C勧告はどれか」という問いの正解として出ています。選択肢はAjax、CSS、SMIL、SVGで、[IPAの公式解答](https://www.ipa.go.jp/shiken/mondai-kaiotu/gmcbt8000000g6fw-att/2016h28a%5Fap%5Fam%5Fans.pdf)でも問25の正解はウ（SMIL）です。SVGは図形を記述する言語、SMILはメディアの再生タイミングとレイアウトを記述する言語、という区別で覚えると取り違えません。

### SMILの文書ファイル名はsmil.xmlにする決まりがありますか？

決まりはありません。SMIL文書はXML文書なので拡張子.xmlでも構文上は成立しますが、W3C仕様が想定する拡張子は.smil、代替として.smiです。自分で作る場合は.smilを使い、特定の製品がファイル名を指定しているときだけその製品の規約に従ってください。

### SMILで字幕テキストを表示するにはどの要素を使いますか？

方法は2つあります。外部ファイルを参照する場合はメディア要素の`text`または`textstream`にsrc属性でテキストファイルを指定し、region属性で表示領域を割り当てます。SMIL 3.0からは`smilText`要素が追加され、SMIL文書の中に直接字幕を書けるようになりました。smilTextの配下では`p`、`span`、`div`、`br`と、時刻を打つ`tev`、表示を消す`clear`が使えます。書式を定義する`textStyle`要素はhead内の`textStyling`に置き、表示側から参照します。

### SMIL 3.0にはどんなプロファイルがありますか？

Language、UnifiedMobile、DAISY、Tiny、smilTextの5つです。Languageが全モジュールを含むフル仕様、Tinyは組み込み向けの最小構成、UnifiedMobileは携帯端末向けです。DAISYはデジタル録音図書専用で、Tinyでは足りずLanguageでは大きすぎるという理由から個別に定義されました。smilTextはテキスト表示機能だけを取り出したプロファイルです。プロファイルはルート要素のbaseProfile属性で示します。ただしsmilTextプロファイルのルートはsmilではなくsmilTextです。

### SMIL 2.0とSMIL 2.1、SMIL 3.0のどれを参照すればよいですか？

SMIL本体の基本を学ぶなら3.0を参照します。ただし既存データを扱うなら、その規格が参照している版を読みます。従来のSMILベースの携帯MMSなら対象リリースが参照するSMIL 2.0、DAISY 2.02の資産ならSMIL 1.0、SVGのアニメーションならSMIL Animation勧告とSVGの仕様です。

## 関連記事

- [SGMLとは？読み方・正式名称（ISO 8879）とXML・HTMLとの違い](/column/details/8044/)
- [XAMLとは？読み方（ザムル）・XMLとの違いと書き方をWPF/.NET MAUIの実例で解説](/tech/details/7598/)
- [Webアクセシビリティのスクリーンリーダー対応：NVDA・VoiceOverでの実機検証と読み上げ順序の設計](/tech/details/16505/)
- [点字ディスプレイとは？仕組みと現行10機種の価格・給付基準額383,500円](/column/details/7631/)
- [WCAGとは？最新版2.2の4原則・達成基準86件とAA適合の範囲](/column/details/7577/)

---

出典: [SMILとは？読み方・意味と.smil・.smiの違い、SVGアニメーションの書き方](<https://www.issoh.co.jp/column/details/7654/>)（株式会社一創）