HTML5 インライン SVG

SVG とは?

SVGはスケーラブルベクターグラフィックスのことです

SVGはWeb用のベクターベースのグラフィックスを定義するために使用されます

SVGはXML形式を使用してグラフィックスを定義します

SVG画像は拡大されるか、拡大されたときにサイズが変更されます損失はありませんグラフィック品質の点で

SVGはWorld Wide Web Consortiumの標準です

SVGを使用すると、同じCanvas APIタイプの多くの描画操作を実装できますが、Canvas要素にテキストを描画すると、文字がそれに固定されてしまいます。ピクセル。テキストは画像の一部となり、キャンバス描画領域を再描画しない限りテキストの内容を変更することはできません。このため、Canvas 上のテキストは検索エンジンで取得できませんが、SVG 上のテキストは検索可能です。たとえば、Google はウェブ上の SVG コンテンツのテキストをインデックスに登録します。

SVG の利点

他の画像形式 (JPEG や GIF など) と比較して、SVG を使用する利点は次のとおりです:

SVG 画像はテキストエディターで作成および変更できます

SVG 画像を検索できます、インデックス付け、スクリプト化、または圧縮

SVGはスケーラブルです

SVG画像はどの解像度でも高品質で印刷できます

SVGは画質を損なうことなく拡大できます

ページSVGに追加

インラインモード：次のように使用されますこれに基づいて、HTML、JavaScript、SVG の対話型アプリケーションを作成できます。

<body>
    <svg width="200" height="200">
    </svg>
</body>

外部メソッド: <img> 要素を使用して外部 SVG ファイルをインポートします。欠点は、SVG 要素と対話するスクリプトを作成できないことです。

単純な図形

SVGには、長方形、円、楕円などの基本的な図形要素が含まれています。形状要素のサイズと位置はプロパティとして定義されます。長方形のプロパティは幅と高さです。円には、半径を表す r 属性があります。これらはすべて CSS 構文を使用して距離を表現するため、単位には px、point、em などが含まれます。

長方形: x="50" y="20" は、長方形の開始点が (50,20) であることを意味します

<body>
    <svg width="200" height="200">
        <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
    </svg>
</body>

SVG 描画切り替えオブジェクトは、オブジェクトドキュメントに表示される順序で実行されます。長方形を描いた後に円を描くと、長方形の上に円が表示されます。

サークルを追加:

<body>    
<svg width="200" height="200">        
<rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc">
</rect>        
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> 
</svg>
</body>

SVG要素を変換

SVG では、複数の要素を組み合わせてグループを形成し、全体にすることができます。

要素は「グループ」を表し、複数の関連する要素を組み合わせるために使用できます。グループのメンバーは ID で参照できます。さらに、グループ全体を変形することもできます。グループに変換属性を追加すると、グループ内のすべてのコンテンツが変換されます。変換プロパティには、回転、変形、スケーリング、ベベルが含まれます。

 <svg width="200" height="200">
        <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">
            <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
            <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
         </g>
    </svg>

コンテンツの再利用

SVG の <defs> 要素は、将来の使用のために予約されているコンテンツを定義するために使用されます。 <use> 要素を使用して、<defs> で定義されたコンテンツを表示する必要がある場所にリンクできます。これら 2 つの要素を使用すると、同じコンテンツを複数回再利用し、冗長性を排除できます。

<svg width="200" height="200">
        <defs>
            <g  id="ShapeGroup">
                <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
                <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
            </g>
        </defs>
        <use xlink:href="#ShapeGroup" transform="translate(60,0)  scale(0.4)"></use>
        <use xlink:href="#ShapeGroup" transform="translate(120,80)  scale(0.75)"></use>
        <use xlink:href="#ShapeGroup" transform="translate(20,60)  scale(0.25)"></use>
    </svg>

パターンとグラデーション

<svg>
<defs>
            <pattern id="GravelPattern" patternContentUnits="userSpaceOnUse"
                x="0" y="0" width="100" height="67" viewBox="0 0 100 67">
                <image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg" />
            </pattern>
            <%--渐变--%>
            <linearGradient id="RedBlackGradient">
                <stop offset="0%" stop-color="#000"></stop>
                <stop offset="100%" stop-color="#f00"></stop>
            </linearGradient>
        </defs>
      <rect x="0" y="20" width="100" height="80" stroke="red"
           fill="url(#RedBlackGradient)" />
        <circle cx="120" cy="80" r="40" stroke="#00f"
            stroke-width="8" fill="url(#GravelPattern)" />
    </svg>

Path

<path> タグはパスを定義するために使用されます。

タグ

タグはパスを定義するために使用されます。

パスデータには次のコマンドが使用できます:

M = moveto

L = lineto

H = 水平線to

V = 垂直線to

C = 曲線to

S = 滑らかな曲線to

Q = 二次ベルジェ曲線

T = 滑らかな二次ベルジェ曲線

A = 楕円弧

Z = パスを閉じる

注: 上記のコマンドはすべて小文字を使用できます。大文字は絶対位置を意味し、小文字は相対位置を意味します。

SVG には単純な形状だけでなく、自由形式のパスも含まれています。 path 要素には、パスデータを表す d 属性があります。 d の値において、M は Move to、L は Line to、Q は 2 次曲線、Z は閉じたパスを表します。

 <svg width="200" height="200">
        <path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z"  />
    </svg>

Text

SVGのテキストはCSSのスタイルの定義に似ています

<svg width="200" height="200">
        <text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f"
            font-size="40px" font-weight="bold">Hello SVG</text>
    </svg>

SVGとCanvasの違い

SVGは、XMLを使用して2Dグラフィックを記述する言語です。

Canvas は JavaScript を通じて 2D グラフィックを描画します。

SVG は XML に基づいています。つまり、SVG DOM 内のすべての要素が利用可能です。 JavaScript イベントハンドラーを要素にアタッチできます。

SVG では、描画されたすべての形状がオブジェクトとみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。

キャンバスはピクセルごとにレンダリングされます。キャンバスでは、グラフィックが一度描画されると、ブラウザの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。

学び続ける