SVG (Scalable Vector Graphics) は、画像を指定するための XML 形式です。 SVG 画像は、以下の追加の画像記述子プロパティをサポートしています。
:foreground foregroundforeground が nil 以外の場合、CSS
の ‘currentcolor’ 値として使用される色を指定する文字列である必要があります。値が nil の場合は、現在のフェイスの前景色がデフォルトとなります。
:background backgroundbackground が nil
以外の場合、色を指定する文字列である必要があり、画像が透過に対応している場合はその色が画像の背景色として使用されます。値が nil の場合は、現在のフェイスの背景色がデフォルトとなります。
:css csscss が nil
でない場合は、画像生成時に使用されるデフォルトの CSS を上書きするための CSS を指定する文字列である必要があります。
EmacsのビルドでSVGサポートが有効になっている場合は、svg.elライブラリの以下の関数を使用して、これらの画像を作成・操作できます。
指定した寸法で、新しい空のSVG画像を作成します。args は引数リストであり、以下を指定できます：
:stroke-width作成されるすべての線のデフォルト幅（ピクセル単位）。
:stroke作成されるすべての線のデフォルトの線色。
この関数は、SVG画像を指定するLispのデータ構造であるSVGオブジェクトを返し、以下のすべての関数はその構造を対象とします。以下の関数における引数svgは、このようなSVGオブジェクトを指定します。
svg に識別子 id
を指定してグラデーションを作成します。type はグラデーションの種類を指定し、linear または radial
のいずれかとなります。stops はパーセント値と色のペアのリストです。
以下では、始点の赤から、25%地点の緑、そして終点の青へと変化する線形グラデーションを作成します。
(svg-gradient svg "gradient1" 'linear
'((0 . "red") (25 . "green") (100 . "blue")))
作成されたグラデーション（SVGオブジェクトに挿入されたもの）は、後で図形を作成するすべての関数で利用できます。
以下の関数はすべて、各種属性をデフォルト値から変更するキーワード引数のリストを任意で受け取ります。有効な属性は以下の通りです。
:stroke-width描画される線や、塗りつぶし図形の輪郭の幅（ピクセル単位）。
:stroke-color描画された線の色、および塗りつぶし図形の輪郭線。
:fill-color塗りつぶし図形に使用される色。
:id形状の特定。
:gradient指定された場合は、以前に定義された勾配オブジェクトの識別子である必要があります。
:clip-pathクリップパスの識別子。
svg に、左上隅が位置 x/y にあり、サイズが width/height である矩形を追加する。
(svg-rectangle svg 100 100 500 500 :gradient "gradient1")
svgに、中心がx/yで半径がradiusの円を加える。
svg に、中心が x/y にあり、水平半径が x-radius、垂直半径が y-radius である楕円を追加する。
svg に、x1/y1 から始まり x2/y2 まで延びる行を追加してください。
svg に、X/Y座標のペアのリストである points を通る複数セグメントの線（別名「ポリライン」）を追加します。
(svg-polyline svg '((200 . 100) (500 . 450) (80 . 100))
:stroke-color "green")
svgにポリゴンを追加します。ここでpointsは、ポリゴンの外周を記述するX/Y座標のペアのリストです。
(svg-polygon svg '((100 . 100) (200 . 150) (150 . 90))
:stroke-color "blue" :fill-color "red")
commandsに従って、図形の輪郭をsvgに追加します。SVG Path Commandsを参照してください。
デフォルトでは、座標は絶対座標となります。直前の位置、または――初期状態では――原点を基準とした相対座標を使用するには、属性 :relative に t
を設定してください。この属性は、関数全体または個々のコマンドに対して指定できます。関数に対して指定した場合、すべてのコマンドでデフォルトとして相対座標が使用されます。個別のコマンドで絶対座標を使用するには、:relative に nil を設定してください。
(svg-path svg '((moveto ((100 . 100))) (lineto ((200 . 0) (0 . 200) (-200 . 0))) (lineto ((100 . 100)) :relative nil)) :stroke-color "blue" :fill-color "lightblue" :relative t)
指定された text を svg に追加します。
(svg-text svg "This is a text" :font-size "40" :font-weight "bold" :stroke "black" :fill "white" :font-family "impact" :letter-spacing "4pt" :x 300 :y 400 :stroke-width 1)
svg に埋め込み（ラスター）画像を追加します。datap
が nil の場合は image
をファイル名とし、それ以外の場合は画像データを生バイトとして含む文字列とします。image-type は
MIME 画像タイプ（例："image/jpeg"）とします。
(svg-embed svg "~/rms.jpg" "image/jpeg" nil
:width "100px" :height "100px"
:x "50px" :y "75px")
svg に、relative-filename
に配置された埋め込み（ラスター）画像を追加します。relative-filename は、:base-uri SVG 画像プロパティの file-name-directory 内で検索されます。:base-uri は、作成する SVG
画像の（存在しない可能性のある）ファイル名を指定します。これにより、すべての埋め込みファイルは :base-uri ファイル名のディレクトリを基準として検索されます。:base-uri を省略した場合は、SVG 画像が読み込まれる元のファイル名が使用されます。:base-uri を使用すると、すべての処理が librsvg によって直接行われるため、svg-embed と比較して大容量画像の埋め込みパフォーマンスが向上します。
;; Embedding /tmp/subdir/rms.jpg and /tmp/another/rms.jpg
(svg-embed-base-uri-image svg "subdir/rms.jpg"
:width "100px" :height "100px"
:x "50px" :y "75px")
(svg-embed-base-uri-image svg "another/rms.jpg"
:width "100px" :height "100px"
:x "75px" :y "50px")
(svg-image svg :scale 1.0
:base-uri "/tmp/dummy"
:width 175 :height 175)
svg にクリッピングパスを追加します。:clip-path プロパティを介してシェイプに適用した場合、そのシェイプのうちクリッピングパスの外側に位置する部分は描画されません。
(let ((clip-path (svg-clip-path svg :id "foo")))
(svg-circle clip-path 200 200 175))
(svg-rectangle svg 50 50 300 300
:fill-color "red"
:clip-path "url(#foo)")
カスタムノード tag を svg に追加します。
(svg-node svg
'rect
:width 300 :height 200 :x 50 :y 100 :fill-color "green")
svgから識別子idの要素を削除してください。
最後に、svg-imageはSVGオブジェクトを引数として受け取り、insert-imageのような関数で使用可能な画像オブジェクトを返します。
円を含む画像を作成して挿入する完全な例を以下に示します。
(let ((svg (svg-create 400 400 :stroke-width 10)))
(svg-gradient svg "gradient1" 'linear '((0 . "red") (100 . "blue")))
(svg-circle svg 200 200 100 :gradient "gradient1"
:stroke-color "green")
(insert-image (svg-image svg)))
SVGパスでは、直線、曲線、円弧、その他の基本図形を組み合わせることで、複雑な画像を作成できます。以下に説明する関数を使用すると、LispプログラムからSVGパスコマンドを呼び出すことができます。
ペンをpointsの最初の点に移動します。追加の点は線で結ばれます。pointsはX/Y座標ペアのリストです。後続のmovetoコマンドは、新しいサブパスの開始を表します。
(svg-path svg '((moveto ((200 . 100) (100 . 200) (0 . 100))))
:fill "white" :stroke "black")
現在のサブパスを始点に戻して終了します。接続線が引かれます。
(svg-path svg '((moveto ((200 . 100) (100 . 200) (0 . 100)))
(closepath)
(moveto ((75 . 125) (100 . 150) (125 . 125)))
(closepath))
:fill "red" :stroke "black")
現在の点から、X/Y座標のペアのリストであるpointsの最初の要素まで線を引きます。複数の点が指定されている場合は、ポリラインを描画します。
(svg-path svg '((moveto ((200 . 100)))
(lineto ((100 . 200) (0 . 100))))
:fill "yellow" :stroke "red")
現在の点から x-coordinates の最初の要素まで水平線を引きます。複数の座標を指定することも可能ですが、通常はあまり意味がありません。
(svg-path svg '((moveto ((100 . 200)))
(horizontal-lineto (300)))
:stroke "green")
縦線を引く。
(svg-path svg '((moveto ((200 . 100)))
(vertical-lineto (300)))
:stroke "green")
coordinate-sets
の最初の要素を使用して、現在の点から3次ベジェ曲線を描画します。座標セットが複数ある場合は、ポリベジェ曲線を描画します。各座標セットは (x1 y1 x2 y2 x y) 形式のリストであり、(x, y) が曲線の終点となります。(x1, y1) と (x2, y2) は、それぞれ始点と終点の制御点です。
(svg-path svg '((moveto ((100 . 100)))
(curveto ((200 100 100 200 200 200)
(300 200 0 100 100 100))))
:fill "transparent" :stroke "red")
coordinate-sets
の最初の要素を用いて、現在の点から3次ベジェ曲線を描画します。座標セットが複数ある場合は、ポリベジェ曲線を描画します。各座標セットは (x2 y2 x y) 形式のリストであり、(x, y) が曲線の終点、(x2, y2) が対応する制御点となります。直前のコマンドが
curveto または smooth-curveto
であった場合、最初の制御点は、現在の点を基準としたそのコマンドの2番目の制御点の鏡像となります。それ以外の場合、最初の制御点は現在の点と一致します。
(svg-path svg '((moveto ((100 . 100)))
(curveto ((200 100 100 200 200 200)))
(smooth-curveto ((0 100 100 100))))
:fill "transparent" :stroke "blue")
coordinate-sets
の最初の要素を使用して、現在の点から2次ベジェ曲線を描画します。座標セットが複数ある場合は、ポリベジェ曲線を描画します。各座標セットは (x1 y1 x y) 形式のリストであり、(x, y) が曲線の終点、(x1, y1) が制御点となります。
(svg-path svg '((moveto ((200 . 100)))
(quadratic-bezier-curveto ((300 100 300 200)))
(quadratic-bezier-curveto ((300 300 200 300)))
(quadratic-bezier-curveto ((100 300 100 200)))
(quadratic-bezier-curveto ((100 100 200 100))))
:fill "transparent" :stroke "pink")
coordinate-sets
の最初の要素を用いて、現在の点から2次ベジェ曲線を描画します。座標セットが複数ある場合は、ポリベジェ曲線を描画します。各座標セットは (x y)
形式のリストであり、(x, y)
が曲線の終点となります。制御点は、直前のコマンドが quadratic-bezier-curveto または smooth-quadratic-bezier-curveto
であった場合、現在の点を基準としたその制御点の鏡像となります。それ以外の場合、制御点は現在の点と一致します。
(svg-path svg '((moveto ((200 . 100)))
(quadratic-bezier-curveto ((300 100 300 200)))
(smooth-quadratic-bezier-curveto ((200 300)))
(smooth-quadratic-bezier-curveto ((100 200)))
(smooth-quadratic-bezier-curveto ((200 100))))
:fill "transparent" :stroke "lightblue")
coordinate-sets
の最初の要素を使用して、現在の点から楕円弧を描画します。座標セットが複数ある場合は、一連の楕円弧を描画します。各座標セットは (rx ry x y) 形式のリストであり、(x, y) が楕円の終点、(rx, ry)
がその半径となります。リストには属性を追加できます：
:x-axis-rotation楕円のx軸が、現在の座標系のx軸に対して回転した角度（度）。
:large-arct
に設定すると、180度以上のアークスイープを描画します。それ以外の場合は、180度以下のアークスイープを描画します。
:sweept に設定すると、正の角度方向に弧を描画します。それ以外の場合は、負の角度方向に描画します。
(svg-path svg '((moveto ((200 . 250)))
(elliptical-arc ((75 75 200 350))))
:fill "transparent" :stroke "red")
(svg-path svg '((moveto ((200 . 250)))
(elliptical-arc ((75 75 200 350 :large-arc t))))
:fill "transparent" :stroke "green")
(svg-path svg '((moveto ((200 . 250)))
(elliptical-arc ((75 75 200 350 :sweep t))))
:fill "transparent" :stroke "blue")
(svg-path svg '((moveto ((200 . 250)))
(elliptical-arc ((75 75 200 350 :large-arc t
:sweep t))))
:fill "transparent" :stroke "gray")
(svg-path svg '((moveto ((160 . 100)))
(elliptical-arc ((40 100 80 0)))
(elliptical-arc ((40 100 -40 -70
:x-axis-rotation -120)))
(elliptical-arc ((40 100 -40 70
:x-axis-rotation -240))))
:stroke "pink" :fill "lightblue"
:relative t)