[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Wikibooks

SVG

2022年3月22日 (火) 15:38時点における最終編集 (トーク | 投稿記録)による版 (→ブラウザでの外部ファイル表示: 修正)
メインページ > 工学 > 情報工学 > プログラミング > SVG

Scalable Vector Graphics（スケーラブル ベクタ グラフィクス、SVG、エスブイジー）とは、XMLによって記述された2次元ベクタグラフィック言語です。W3Cがオープン標準として勧告しています。[1]

目次

「※」がついている単元はサブページ未作成。 （編集者へ: サブページが出来たら、更新して「※」を除去してください。）

※ * SVG/図形の描画
※ * SVG/テキストの描画
※ * SVG/図形の変換
※ * SVG/構造化
※ * SVG/関連情報の記述方法

ブラウザでの外部ファイル表示

SVGは規格と実装との間に差があり、 外部ファイルとしてSVGファイルを読み込ませる場合のプログラミングがやや面倒です。（JavaScriptのよう簡単にはいきません。）

ウェブブラウザに外部ファイルとしてSVGファイルを読み込ませたい場合、Firefoxの場合なら、その外部SVGファイルに冒頭に、下記コードのように

名前空間を xmlns="http://www.w3.org/2000/svg" というふうに設定する必要と、
キャンバスサイズをwidthやheight属性などで設定する必要というように、

こういった必要があります。（Windows版のFirefoxの場合、キャンバスサイズをGoogle Chrome と同様に省略できるが（標準設定のサイズになる）、Linuxなど他OSの場合ではキャンバスサイズが必要になる場合もある。ブラウザが同じ「Firefox」でもOSごとに実装が微妙に違う。）

Google Chrome および Microsoft Edge の場合も同様に、名前空間 xmlns="http://www.w3.org/2000/svg" の指定が必要です。（なお Google Chrome および Microsoft Edge の場合、キャンバスサイズの指定がなくても自動でキャンバスサイズの設定が行われる。）

この様に、名前空間などを記述が欠落するとSVGファイルであることがブラウザに伝わらず。希望通り表示できなかったりエラーメッセージを伴う結果と成る。

外部ファイル側のコード例
たとえばファイル名を "test.svg" とする。
<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="200">
    <rect x="150" y="40" width="100" height="500" 
     fill="lightblue" stroke="black" stroke-width=" 5" />
</svg>

なお、キャンバスサイズを図形より地位いさい場合にはハミだしている部分は非表示になります（上記コードでは意図的にハミ出しています）。上記コードは縦長の長方形を表示するコードですがキャンバスサイズをハミ出た下半分は非表示になります。

HTMLファイル側

上記の外部SVGファイルを呼び出すHTMLファイル側は使う要素によって下記のようにマークアップが異なる。

  • IMAGE要素
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>外部SVG読み込みテスト</title>
  </head>
  <body>
    <image src="test.svg" type="image/svg+xml">
  </body>
</html>

SVGファイルは画像ファイルなので、IMAGE要素で読み込めます。IMAGE要素ではsrc属性で外部ファイルを指定します。

もしWinodowsで、上記コードを実行した場合にブラウザの要素などのタイトルが文字化けする場合、<meta charset="utf-8">を除去してください（Windowsではバージョンによっては文字コードがUTF-8ではなくShift_JISなので）。以下のOBJECT要素などでも同様です。

  • OBJECT要素
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>外部SVG読み込みテスト</title>
  </head>
  <body>
    <object data="test.svg" type="image/svg+xml">
  </body>
</html>

OBJECT要素は、オブジェクトデータを記述するためのHTML要素です。 OBJECT要素ではsrc属性に代わってdata属性で外部ファイル指定します。[1]。

  • EMBED要素

このほか、EMBED要素を使う方法もある。 

<!DOCTYPE html>
<html> 
  <head lang="2">
    <meta charset="utf-8">
    <title>外部SVG読み込みテスト</title>
  </head>
  <body>
    <embed src="test.svg" type="image/svg+xml">
  </body>
</html>

EMBED要素は、埋め込み外部コンテンツ要素を記述するためのHTML要素である。 EMBED要素ではsrc属性で外部ファイル指定します。

画像そのものの記法

四角形

基本

rect要素で表します。[2] 

<svg>
    <rect x="1" y="1" width="100" height="100" 
    fill="#FFFFFF" stroke="#000000" stroke-width="5"/>
</svg>

改行をしなくてもいいが、上記コードでは見やすさをfillの手前で重視して改行した。

rect要素で最低限必要なのは、位置と幅を指定するための次の4要素である。

x
x座標
y
y座標
width
横幅
height
縦幅


rextの山カッコ内の最後に、下記のように/が必要です。（下記コードの場合、 stroke-width="5" の次の部分。 ） 

    <rect x="1" y="1" width="100" height="100" 
    fill="#FFFFFF" stroke="#000000" stroke-width="5" />

もし、この/が終わりに無いと、認識せずに、エラーになり、非表示になります。（長方形以外の、円や線分など他の静止図形のタグでも同様、最後に「/」が必要です。）


なお、下記のように、付随的な要素をstyleでまとめても良い。なお、下記のようにstyleでまとめる記法はCSSに由来するものであり、インラインCSSという記法です。（fillの次の点々はセミコロン、#FFFFFFの次の点々はコロンです。混同しないよう、注意しましょう。） 

<svg>
    <rect x="1" y="1" width="100" height="100" style="fill: #FFFFFF; stroke: #000000; stroke-width: 5; "/>
</svg>

なお、fillは閉じた領域の塗りつぶしの色です。strokeは、境界線など線分の色です。 fill="#FFFFFF;のFFは16進数です（十進数の255に相当）。

fillを指定しない場合、noneと書いても良いです。 

<svg>
    <rect x="1" y="1" width="100" height="100" style="fill: none; stroke: #000000; stroke-width: 5; "/>
</svg>

なお、noneの代わりにblueやredと書くと、それぞれの色になります(つまり、HTMLカラーが使えます)。たとえば青色に内側を塗りつぶすなら 

<svg>
    <rect x="1" y="1" width="100" height="100" style="fill: blue; stroke: #000000; stroke-width: 5; "/>
</svg>

とも書けます。

色の指定方法

色については rgb(11,11,11)のように0～255の十進数の数値指定で書いてもいい。つまり、 

<svg>
    <rect x="1" y="1" width="100" height="100" 
   fill="rgb(220,220,255)" stroke="rgb(0,0,0)" stroke-width="5 "/>
</svg>

とも書ける。この場合、水色（うすめの青）で塗りつぶしています。

rectに限らず、円や線分など他の図形でも同様に、styleやrgbを使える。

百分率も可能

色の指定は%単位でも可能ですが、rgbの3色すべてに%をつける必要があります。 

<svg>
    <rect x="1" y="1" width="100" height="100" 
     fill="rgb(0%,0%,100%)" stroke="rgb(0,0,0)" stroke-width="5 "/>
</svg>


透明化

不透明度アルファ

色はさらに、不透明度アルファを追加したrgba()を使える。ただし、不透明度の値の指定は 0.0 ～ 1.0 の間の数値で行わなければならない。SVGの不透明度は 0 で完全に不透明であり、1 で完全に透明である。 


<svg>
    <rect x="50" y="50" width="100" height="100" 
    fill="rgba(255,0,0,1)" stroke="rgba(0,0,0,1)" stroke-width="5 "/>
    
    <rect x="1" y="1" width="100" height="100" 
     fill="rgba(220,220,255,0.7)" stroke="rgba(0,0,0,1)" stroke-width="5 "/>
     
</svg>

rgbaの第4引数は不透明度である。0から1の間で指定する。不透明にしたい場合には値を1にする。この不透明の数値の指定方法は、CSSに由来する方法である。（Inkscapeなどのドローソフトでは不透明度を0～255の数値で指定するものもあるが、ブラウザ版SVGの仕様とは異なるので注意。）

rgba()関数は、0～255までの定義域と、0～1までの定義域とが混在しているので、あまりメンテナンスがしやすくないかもしれません。

透明の属性

rgb()関数でも透明の処理もできるように、属性で fill-opacity という塗りつぶし領域の不透明度を 0.0 ～ 1.0 で指定できる属性がありますので、メンテナンスのしやすさから、不透明度の指定には fill-opacity を使うほうがいいかもしれません。

fill-opacity は 0 で完全に不透明であり、1 で完全に透明である。 


<svg>
    <rect x="50" y="50" width="100" height="100" 
    fill-opacity="1.0" fill="rgb(255,0,0 )" stroke="rgb(0,0,0)" stroke-width="5 "/>
    
    <rect x="1" y="1" width="100" height="100" 
    fill-opacity="0.7"  fill="rgb(220,220,255)"  stroke="rgb(0,0,255)" stroke-width="3 "  />
     
</svg>

なお、ストロークの不透明度を指定できる stroke-opacity という属性もあるのですが、あまり実装の性能がよくありません。ハードウェアの事情により、太いストロークを描画する場合に、微妙に表示が崩れてしまう場合があります。

図形の加工

フィレット

図形のカドを丸まらせたい場合（製図の用語で言う「フィレット」）、rxおよびryで丸めの半径を指定できる。 

<svg>
    <rect x="1" y="1" width="100" height="100" 
    fill="rgb(255,255,1)" stroke="rgba(0,0,0,1)" stroke-width="5 "
    rx="10" ry="10" />
</svg>

この他、transfrom属性とrotate()関数を使って、斜めに傾いた長方形などの図形を書けます。長方形以外の図形や文字列もrotate()関数に対応しています。

詳しくは、回転の単元で説明します。

円

circle要素で表します。[3]circleでは、円の形を中心点の座標位置と半径のペアで表します。 

<svg>
    <circle cx="1" cy="1" r="100" style="fill: #FFFFFF; stroke: #000000; "/>
</svg>
cx
円の中心点のx座標
cy
円の中心点のy座標
r
半径

多角形

polygon要素で表します。[4]英語の polygon ポリゴンとは、日本語で「多角形」を意味します。

下記のコード例では座標 (0,100)、(50,0)、(100,100) を結んだ三角形を表示します。 

<svg>
    <title>正三角形</title>
    <polygon points="0,100 50,0 100,100"/>
</svg>
points
各点の座標
隣りあう点が結ばれる事と、および、始点と終点が結ばれます。
<polygon points="第1点のx座標,y座標  第2点のx座標,y座標  第3点のx座標,y座標"/>

の書式です。


なお、閉じていない単なる折れ線を描画したい場合には、polygon 要素ではなく polyline (ポリライン)要素を使います。


折れ線

polyline (ポリライン)要素で折れ線を書けますが、fill属性およびstroke属性が必要です。 どのブラウザでも、fillの指定が無いと、塗りつぶしをしてしまいます。

また、fillをnoneにしたあとは、strokeが設定の無い限りストローク色も無しになってしまい描画されない状態なので、strokeも再設定する必要があります。 

<svg>
    <polyline points="0,100
      50,0
      100,100" 
      
      fill="none"
      stroke="black"
    />
    
</svg>
曲がり具合の指定

折れ線の内部の、それぞれの曲がりのある角の箇所での描画方法を指定できます。

線の太さ(stroke-width)の範囲内で、角を丸めるか(round)、尖らすか(miter)、面取り(bevel)をするかを指定できます。

何も指定ない場合には、miterで描画するように設定されています。

SVGのこれらの機能は、あくまで線の太さの範囲内でしか、処理を行えません。（つまり、たとえば製図ソフト AutoCAD のような面取り・フィレットは、SVGのこれらの指定では出来ないです。） また、その折れ線の内部のすべての曲がり箇所で、同様の曲がり具合（あるいは尖り具合）で描画します。 


<svg>
    <polyline points="10,100
      50,10
      100,100" 
      
      fill="none"
      stroke="black"
      
      stroke-width="20" stroke-linejoin="round"
      
    />
    
</svg>

stroke-linejoin属性によって、"round"または"miter"または"bevel"を指定します。


破線など

stroke-dasharray(ストローク・ダッシュ アレイ)属性を使って、破線などを描くことができます。

書式は 

      stroke-dasharray="描く部分の長さ1 描かない部分の長さ1
      描く部分の長さ2 描かない部分の長さ2 "

といったふうに、描く部分と描かない部分との繰り返しです。 


<svg>

    <!-- 一点鎖線 -->
    <polyline points="50,40
      300,40" 
      
      fill="none"
      stroke="black"
      
      stroke-dasharray="20 4
      4 4 "
    />
    
    
    <!-- 破線 -->
     <polyline points="50,80
      300,80" 
      
      fill="none"
      stroke="black"
      
      stroke-dasharray="6 3"
    />
    
</svg>

文章の描画

HTMLでwebページを作るだけなら不要ですが、規格上は<text>タグで囲むことによりSVGファイルでも文字列を表示させる事ができます。 HTMLとは違い、textタグでは座標の位置を指定して文字列を表示できます。 

<svg>
    <text x="100" y="60"> テスト </text>
</svg>
x
文字列の開始位置（左下）のx座標
y
文字列の開始位置（左下）のy座標


文字列の開始位置は、左下です。左上ではないので、注意してください。

追加の属性として、

font-size でフォントの大きさ、
text-decoration="underline" で下線の追加、

など、設定できます。

例
<svg>
    <text x="100" y="60" font-size="30" text-decoration="underline" > テスト </text>
</svg>


回転

まず、基準の図形として、回転していない図形の描画をしましょう。 

<svg>
    <rect x="150" y="80" width="100" height="50" 
    fill="lightblue"  stroke="black"  stroke-width=" 5" />
</svg>

この図形をたとえば斜めに傾かせたい場合、回転させる図形のタグの属性において 

transform="rotate(回転角, 回転中心のx座標, y座標)"

の書式で属性を追記することで、回転を指定できます。

角度の単位は、直角を90度とする「度」単位です。（日本なら、小学校で習う角度の単位と同じです。）

なお、座標を指定しない場合、原点を中心として回転します。 

<svg>
    <rect id="some" x="150" y="80" width="100" height="50" 
    fill="lightblue"  stroke="black"  stroke-width=" 5" 
    transform="rotate(-10,100,100)"
    />
    
</svg>

たとえば上記コードなら、長方形の右上が10度持ちあがった図形になります。


長方形だけでなく、楕円や折れ線や多角形など他の図形でも、この方法で回転が可能です。

また、textタグの文字列も同様に、この方法で回転が可能です。

構造化

グループ化

g タグを用いて、gタグ内のオブジェクトに共通する属性を一括で記述できます。このような仕組みをSVG用語では一般に「グループ化」といいます。 

<svg>
    <g stroke="blue" fill="white" >
        <rect x="1" y="1" width="100" height="100" stroke-width="5" />
        <circle cx="30" cy="30" r="10" stroke-width="3" />
    </g>
</svg>

たとえば上のコードの場合、長方形と円との両方に、ストロ－ク色を青に指定し、内側の塗りつぶし色を白に指定と、一括で指定しています。

各オブジェクトとグループ内要素に矛盾のある場合

なお、各オブジェクトにgタグの指定内容と矛盾する属性がある場合、普通は各オブジェクト側の指定が優先されます。たとえばcircleタグで stroke="red" という指定と、gタグの開始タグで stroke="blue" があれば、円のストローク色は赤色で表示されます。（Firefox, google Chrome, Microsoft Edge どれも結果は同じく、円ストロークだけ赤色の結果です。WindowsだけでなくLinuxでも同様の結果です。 ）


CSSとの組み合わせ

SVGのgタグを使わなくても、CSSとHTMLのクラスclassを使っても、共通する属性を一括で記述することができます。ただし、各オブジェクトごとに、クラスを指定する必要があります。 

<style type="text/css">
        .test {
            stroke: red;
            fill: white;
         }
</style>

<svg>
    <rect x="1" y="1" width="100" height="100" stroke-width="5" class="test" />
    <circle cx="30" cy="30" r="10" stroke-width="3" class="test" />
</svg>

上のコードは、長方形と円をともに、ストロークだけ赤色で図形を表示します。


class 属性で、指定したスタイルを呼び出すのを忘れないようにしてください。

各オブジェクトとスタイルに矛盾のある場合

なお、CSS側とsvgオブジェクト側の属性で矛盾する内容がある場合（たとえばストローク色が違う場合など）、CSS側の指定が優先されます。（Firefox, google Chrome, Microsoft Edge どれも結果は同じで、CSS側のスタイルが優先されます。WindowsだけでなくLinuxでも同様の結果です。 ）

属性の記述を順序を class="test" stroke="blue" と書こうが、 stroke="blue" class="test" と書こうが、2020年7月の時点ではCSS側のスタイルがどのブラウザでも優先されます。

関連情報の記述方法

SVGでは下記のように、タイトルなどの付加情報を記述することもできます。

記述の位置はどこでも可能ですが、一般的には、svg開始タグの直後に記載するのが慣例です。 


<svg>
    <title> 題名 </title>
    <desc> 解説 </desc>
    
    <rect x="150" y="80" width="100" height="50" 
    fill="lightblue"  stroke="black"  stroke-width=" 5" />
</svg>

title や desc は省略も可能です。

説明

desc要素で表します。

タイトル

title要素で、タイトルを表します。

HTMLファイルに組み込んだ場合、規格の想定などではブラウザなどでtitleの内容を表示する予定なのかもしれないのですが、しかし現状2020年の時点では、FirefoxでもGoogle Chromeでもブラウザではsvgタグ内部のtitleタグの内容は表示されません。（HTMLタグのtitleとは、仕様の実装が違っています。）

また、拡張子を.svgに変えてもInkscapeで調べても同様に、titleタグの内容ではなくファイル名そのものがInkscapeのファイル名に表示されます。


非表示タグ

HTMLファイルにコメントを書く非表示タグ 

<!-- ここにコメントを書く -->

はSVGでも同様に使えますので、ブラウザ画面に表示の不用なプログラマー向けの説明書きなどは、非表示タグで説明するという方法も可能です。

Inkscapeなどのドローソフトでも同様に、タグ<!-- --> とその中身は非表示になります。

参考文献

脚注

このページ「SVG」は、まだ書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にトークページへどうぞ。
  1. ^ https://html.spec.whatwg.org/multipage/iframe-embed-object.html#htmlobjectelement HTML Living Standard — HTMLObjectElement
  2. ^ https://developer.mozilla.org/ja/docs/Web/SVG/Element/rect
  3. ^ https://developer.mozilla.org/ja/docs/Web/SVG/Element/circle
  4. ^ https://developer.mozilla.org/ja/docs/Web/SVG/Element/polygon
"https://ja.wikibooks.org/w/index.php?title=SVG&oldid=196126" より作成