マンガで分かるプログラミング用語辞典

「SVG」
～マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典（135）

柳井政和[著]

2018/07/31 14:00

ポスト

解説

　「SVG」（Scalable Vector Graphics）は、XMLベースのベクタ画像です。HTMLのようにタグで画像を表します。このSVGは、HTMLに画像として読み込んだり、HTML内に直接配置することができます。

　SVGは、静的な画像を表示するだけでなく、アニメーションやインタラクティブな操作を行えます。また、HTML内に配置された場合は、JavaScriptから操作することも可能です。

　ラスタ画像ではなくベクタ画像なので、大きな画像を滑らかな表示で行うことができます。

サンプル

　マンガ中に登場したSVGを利用したサンプルです。1つ目のSVGは、外部ファイルにしてimgタグで読み込んでいます。2つ目のSVGは、HTMLファイルに直接埋め込んでいます。

index.html

<html>
    <head>
        <title>「SVG」のサンプル</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <img src="svg1.svg">
        <br>

        <svg xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="100" height="100">
            <rect x="20" y="20" width="60" height="60"
              fill="#f00" id="r1">
                <animateTransform
                  attributeType="XML" attributeName="transform"
                  type="rotate" from="0 50,50" to="1440 50,50"
                  dur="1s" begin="r1.mouseup"
                  restart="whenNotActive" />
            </rect>
        </svg>

    </body>
</html>

svg1.svg

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100" height="100">
    <rect x="0" y="0" width="100" height="100"
      rx="10" ry="10" fill="#00f" />
    <circle cx="50" cy="50" r="45" fill="#f00" />
</svg>

サンプルファイルはこちらから

フィードバックお待ちしております！

　ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookやTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。

この記事は参考になりましたか？

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。

印刷用を表示

ポスト

マンガで分かるプログラミング用語辞典連載記事一覧: 「ジェネリクス」　～マンガでプログラミング用語解説

「列挙型」　～マンガでプログラミング用語解説

「リスト内包表記」　～マンガでプログラミング用語解説

もっと読む

この記事の著者: 柳井政和（ヤナイマサカズ）

クロノス・クラウン合同会社代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています（『裏切りのプログラム』他）。面白いことなら何でもOKのさすらいの企画屋です。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事