SVG revision01 2002 5 6 2006 7 6 2007 2 3 2008 2 23 2009 2 2 2011 2 3 2011 2 16 revision01 Copyright c 2002 2011 Daikoku Manabu This tutorial is licen

Similar documents

1 1 2 Unix SVG SVG SVG SVG

コンピュータグラフィックス - 第4回　色彩の表現

07_経営論集2010　小松先生.indd

Network Computing の基礎

( )$("canvas").drawarc({strokestyle:"red", x:100, y:100, radius:20, start:0, end:360); drawline(x1:, y1:,... xn:, yn:) drawline n 2 n 3 x1: y1: xn: yn

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML

1.1. jquery 1 jquery jcanvas javascript jquery JavaScript jquery $() JavaScript JavaScript jquery Googlr Chrome Eddge(Enternet Explorer) Web Web jquer

インターネットマガジン2001年1月号―INTERNET magazine No.72

HTML文書の作成

経営論集2011_07_小松先生.indd

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis >

27短01研01斉藤.indd

速報：SMIL Boston WD 2

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1

UbiquitousMetadata活用-3

() < > </ > / HTML SGML HTML 1.1 DTD DTD ( DTD (prolog) )SGML 1. DTD ( ) 2. DTD <!-- DTD-- > <!ELEMENT MAIL - - ((TO,FROM)?,DATE?,BODY) > <!ELEMENT TO

1.1. jquery 1 jquery jcanvas jquery javascript jquery JavaScript jquery $() JavaScript JavaScript jquery Googlr Chrome Eddge(Enternet Explorer) Web jq

2 PostScript PostScript (token) 437 == 437 == PostScript PostScript 437 == PostScript (operator) 437 == == ==

山梨県ホームページ作成ガイドライン

G-XML EWEB-3K-N064

¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ

あいち電子自治体ガイドライン（第1章）

1.1. jquery 1 jquery jcanvas jquery javascript jquery JavaScript jquery $() JavaScript JavaScript jquery Googlr Chrome Eddge(Enternet Explorer) Web jq

スタイルシートでデザインを整えよう

InfoPros13_digest.key

svg の基本的な使い方 svg 文書の根幹となる svg 要素, 図形のグループ化を行う g 要素,svg におけるモジュール化を表す defs 要素, 図形を参照する use 要素,ハイパーリンクを表す a 要素等. 図形

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し中にテキストで Out

2 VRML VRML.wrl VRML VRML VRML VRML Cosmo Software Cosmo Player VRML 1.4 VRML (header) (statement) VRML V2.0 VRML utf8 VRML

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個

スタイルシートでデザインを整えよう

文書構造とスタイル

1221 Transitionの指定項目

新しいイテレーション型開発

0序文‐1章.indd

Cascade Style Sheet

XQueryってどんなもの？

XML XML (Extensible Markup Language) ISO SGML (Standard Generalized Markup Language) W3C (World Wide Web Consortium) XML 1.0

CSSNiteLP51-s7-kubo.key

¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ

Border Width と記述します id 属性 div3 の div 要素を記述し中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt

インターネットマガジン2000年12月号―INTERNET magazine No.71

MovingTextsAnime1 の説明 HTML の記述 (MovingTextsAnime1.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 div1 のdiv 要素から id 属性 div

SVG資料第6回目(その3) SVGとHTMLの間でデータを交換する

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) はテキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ

JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ薗田海樹 The. H.30 情報研究会 1

分散情報システム構成法

PowerPoint Presentation

動させることはできません少し工夫が必要になります元の画像を移動すれば反射画像も一緒についてきますが反射画像だけが移動するように見せたいので元の画像の上には黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属

alpha alpha03 Copyright c Daikoku Manabu This tutorial is licensed under a Creative Commons Attribution 2.1 Japan License.

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は

演習室のPCのハードディスクには演習で作成したデータは保管できません各 PCのネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください(Zドライブとして使用できます) 演習名使用するフォルダ演習 1 Z: W

Condition DAQ condition condition 2 3 XML key value

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </hea

Vol.56 No (Mar. 2015) Canvas SVG HTML Web Viewport Library UML Canvas SVG 1,000 HTML SVG Viewport Library Viewport Library HTML HTML Web H

PowerPoint プレゼンテーション

E MathML W3C MathJax 1.3 MathJax MathJax[5] TEX MathML JavaScript TEX MathML [8] [9] MathSciNet[10] MathJax MathJax MathJax MathJax MathJax MathJax We

LAN Copyright c Daikoku Manabu This tutorial is licensed under a Creative Commons Attribution 2.1 Japan License

_勉強会_丸山さつき_v3

OSC_isshiki_090710c.ppt

4-1. html css html ht tp ht tp html HyperTex t Markup Language: html <meta ht tp - equiv="content-type" content=" tex t /html; charset=utf-

ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web

shimizu_thesis03.dvi

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します背景色を黒色で指定します画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig

XMLテクノロジを使いやすくする

背景の線形グラデーションをアニメーションのように見せる方法は前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) はテキストの輪郭や色を -webkit-text-stroke-width -webkit

HTML5&CSS3 レッスンブック

【お試し版】Web制作者のためのCSS設計の教科書（非売品）

19 3!! (+) (>) (++) (+=) for while 3.1!! (20, 20) (1)(Blocks1.java) import javax.swing.japplet; import java.awt.graphics;

PowerPoint Presentation

Transcription:

SVG revision01

SVG revision01 2002 5 6 2006 7 6 2007 2 3 2008 2 23 2009 2 2 2011 2 3 2011 2 16 revision01 Copyright c 2002 2011 Daikoku Manabu This tutorial is licensed under a Creative Commons Attribution 2.1 Japan License.

3 1 SVG 10 1.1 XML...................................... 10 1.1.1................................ 10 1.1.2 XML................................ 10 1.1.3...................................... 10 1.1.4...................................... 10 1.1.5...................................... 11 1.1.6...................................... 11 1.1.7 XML................................... 12 1.1.8.................................... 12 1.1.9................................. 12 1.1.10............................. 13 1.2 SVG.................................. 13 1.2.1 SVG................................. 13 1.2.2............................... 13 1.2.3 SVG............................... 13 1.2.4 SVG............................ 14 1.2.5 SVG............................... 14 1.3......................................... 14 1.3.1.......................... 14 1.3.2.................................. 15 1.3.3............................. 15 1.3.4 px............................... 16 1.4........................................... 16 1.4.1................................ 16 1.4.2...................................... 17 1.4.3 16............................ 17 1.4.4 10............................ 18 1.4.5....................................... 18 1.4.6............................... 18 1.4.7.................................... 19 1.5........................................ 20 1.5.1................................ 20 1.5.2............................... 20 1.5.3................................ 20 1.5.4................................ 21 1.6......................................... 21 1.6.1............................... 21 1.6.2............................... 21 2 22 2.1..................................... 22 2.1.1............................. 22 2.1.2..................................... 23 2.1.3....................................... 23 2.1.4...................................... 23 2.1.5...................................... 24 2.1.6..................................... 24 2.1.7..................................... 25 2.2.......................................... 25 2.2.1................................. 25 2.2.2............................. 25

4 2.2.3............................... 25 2.2.4........................... 26 2.2.5.................................. 26 2.2.6................................. 26 2.2.7.................................. 27 2.2.8................................. 27 2.3........................................ 28 2.3.1........................... 28 2.3.2................................ 28 2.3.3........................... 29 2.3.4................. 30 2.3.5................................ 30 2.3.6............................ 31 2.4..................................... 31 2.4.1............................. 31 2.4.2................................. 32 2.4.3................................. 32 2.4.4................................. 33 2.4.5................................. 33 2.4.6.................................. 34 2.5........................................ 35 2.5.1.................................. 35 2.5.2................................. 35 2.5.3...................................... 36 3 36 3.1.................................... 37 3.1.1............................ 37 3.1.2............................ 37 3.1.3............................. 37 3.1.4............... 38 3.1.5............................ 38 3.1.6..................... 38 3.1.7............................ 39 3.1.8.......................... 39 3.2........................................ 40 3.2.1............................... 40 3.2.2................................ 40 3.2.3................................ 40 3.2.4............................. 40 3.2.5............................... 41 3.3..................................... 41 3.3.1............................ 41 3.3.2........................... 41 3.3.3........................... 41 3.4.......................................... 42 3.4.1............................. 42 3.4.2 SVG............................... 42 4 43 4.1................................... 43 4.1.1............................. 43 4.1.2............................... 43 4.1.3................................ 43 4.1.4............................... 43

5 4.1.5............................ 44 4.1.6............................ 44 4.1.7............................. 45 4.2.......................................... 45 4.2.1...................... 45 4.2.2............................ 45 4.2.3............................ 46 4.3.......................................... 46 4.3.1............................ 46 4.3.2.................................... 46 4.4..................................... 48 4.4.1............................. 48 4.4.2...................................... 48 4.4.3.................................... 48 4.4.4............................. 48 4.4.5.................................... 49 5 50 5.1................................ 50 5.1.1........................ 50 5.1.2............................. 50 5.1.3.......................... 50 5.2................................ 50 5.2.1........................... 50 5.2.2........................ 51 5.2.3.................................... 51 5.3........................... 52 5.3.1........................... 52 5.3.2............................ 52 5.3.3............................ 52 5.3.4............................ 53 5.3.5............................ 53 5.4......................... 54 5.4.1............... 54 5.4.2....................... 54 6 CSS 55 6.1 CSS...................................... 55 6.1.1 CSS.............................. 55 6.1.2........................... 55 6.1.3...................... 56 6.1.4 CDATA............................. 56 6.2......................................... 56 6.2.1................................. 56 6.2.2.................................. 57 6.2.3................................. 57 6.2.4...................................... 57 6.2.5........................... 57 6.3...................................... 58 6.3.1............................... 58 6.3.2 ID................................. 58 6.3.3................................ 59 6.3.4.................................. 60 6.4..................................... 60 6.4.1..................... 60

6 6.4.2........................... 61 6.4.3....................... 61 7 62 7.1............................... 62 7.1.1............................. 62 7.1.2 JavaScript............................. 62 7.1.3........................ 63 7.1.4............................. 63 7.2........................................ 64 7.2.1............................... 64 7.2.2................................. 64 7.2.3............................. 65 7.2.4............................. 65 7.3................................ 65 7.3.1........................ 65 7.3.2........................... 66 7.3.3............................... 66 8 DOM 67 8.1 DOM..................................... 67 8.1.1 DOM................................ 67 8.1.2................................ 67 8.1.3............................... 67 8.1.4..................................... 67 8.2...................................... 68 8.2.1................................. 68 8.2.2................................. 68 8.3................................ 69 8.3.1........................ 69 8.3.2................................ 70 8.3.3................................ 71 8.4......................... 71 8.4.1................ 71 8.4.2.................................. 71 8.4.3............ 71 8.5............................... 73 8.5.1...................... 73 8.5.2....................... 73 8.6................................... 74 8.6.1........................... 74 8.6.2.................................. 74 8.6.3........................ 75 8.6.4.................................. 76 8.7 DOM.............................. 77 8.7.1 DOM...................... 77 8.7.2................... 77 8.7.3............................ 77 8.7.4.......................... 78

7 9 78 9.1................................ 78 9.1.1............................ 78 9.1.2............................ 79 9.1.3........................ 80 9.2.......................... 81 9.2.1................................ 81 9.2.2............................ 81 9.2.3........................ 81 9.2.4..................... 82 10 Raphaël 83 10.1 Raphaël.................................... 83 10.1.1 Raphaël............................... 83 10.1.2 Raphaël.......................... 83 10.1.3........................... 83 10.1.4........................... 84 10.1.5 HTML........................ 84 10.1.6.................................. 85 10.1.7............................... 86 10.2...................................... 86 10.2.1................................ 86 10.2.2..................................... 86 10.2.3....................................... 87 10.2.4...................................... 87 10.2.5.................................... 88 10.3..................................... 89 10.3.1 Raphaël...................... 89 10.3.2............................ 89 10.4.................................... 90 10.4.1 Raphaël..................... 90 10.4.2........................ 90 10.4.3..................... 91 10.4.4............................ 91 10.5...................................... 92 10.5.1 Raphaël........................ 92 10.5.2............ 92 10.5.3 SVG..... 92 A SVG 93 A.1..................................... 93 A.1.1............................... 93 A.1.2 SVG.......................... 93 A.2.................................... 95 A.2.1........................... 95 A.2.2 SVG......................... 95 A.3 15....................................... 97 A.3.1 15.............................. 97 A.3.2 15 SVG............................ 97 A.4......................................... 99 A.4.1............................. 99 A.4.2............................... 99 A.4.3............................. 99 A.4.4 SVG.............................. 100

8 B JavaScript 103 B.1..................................... 103 B.1.1...................................... 103 B.1.2..................................... 103 B.1.3..................................... 103 B.1.4.................................. 103 B.1.5.................................... 103 B.2........................................... 103 B.2.1.................................... 103 B.2.2....................................... 104 B.2.3.................................... 104 B.2.4 this...................................... 104 B.2.5.................................... 104 B.2.6..................................... 104 B.2.7..................................... 105 B.2.8................................. 106 B.3........................................... 106 B.3.1.................................... 106 B.3.2.................................... 106 B.3.3..................................... 106 B.3.4...................................... 106 B.3.5...................................... 106 B.3.6 if...................................... 106 B.3.7 switch................................... 106 B.3.8 while.................................... 107 B.3.9 do-while.................................. 107 B.3.10 for..................................... 107 B.3.11 for-in................................... 107 B.3.12 continue.................................. 107 B.3.13 break.................................... 107 B.3.14 return................................... 107 B.3.15 with.................................... 107 B.3.16 throw.................................... 108 B.3.17 try..................................... 108 B.4..................................... 108 B.4.1............................. 108 B.4.2............................ 108 B.4.3........................ 109 B.4.4.......................... 109 B.4.5............................. 109 B.4.6............................. 109 B.4.7..................... 109 B.4.8................................ 110 B.4.9.................................... 110 B.4.10.......................... 110 B.4.11............................ 111 B.5............................... 111 B.5.1....................... 111 B.5.2....................... 111 B.5.3..................... 111 B.6.......................................... 112 B.6.1.................................. 112 B.6.2................................ 112 B.7.......................................... 112 B.7.1.................................. 112

9 B.7.2................................. 112 B.7.3................................ 112 B.8................................. 113 B.8.1.......................... 113 B.8.2 String.............................. 113 B.8.3................................. 114 B.8.4....................... 114 B.9 Math.......................................... 115 B.9.1 Math.................................. 115 B.9.2 Math.................................. 115 B.9.3 Math............................... 115 B.10................................... 115 B.10.1........................... 115 B.10.2........................... 115 B.10.3 Date............................... 116 B.10.4........................ 116 B.11................................ 117 B.11.1........................ 117 B.11.2................................ 117 B.11.3...................... 117 118 120

10 1 SVG 1 SVG 1.1 XML 1.1.1 SVG SVG SVG XML SVG XML 1.1.2 XML XML (metalanguage) XML Extensible Markup Language XML XML XML (XML application) SVG XML SVG XML XHTML MathML SMIL RSS OWL XML W3C(World Wide Web Consortium) 1 (recommendation) 1.1.3 XML XML (XML document) XML (tag) 2 <... > (less than, < ) (greater than, > ) (start-tag) (end-tag) (empty-element tag) < > <tamanegi> </ > </daikon> < /> <hakusai/> (slash, / ) 1.1.4 XML XML (element) 1 W3C URL http://www.w3.org/ 2

1.1. XML 11 <renkon> </renkon> (content) <ninjin/> (element type) (element type name) 1.1.5 1 (attribute) (attribute name) (attribute value) (attribute specification) =" " (double quote, " ) distance 83km distance="83km" <student grade="3" class="d" no="28" sex="female" name="mita Hiroko" tel="0874-20-9517"/> 6 1 (whitespace) XML (space) (tab) (carriage return) (line feed) 1.1.6 XML (comment) XML XML XML

12 1 SVG   2 ( -- ) XML 1.1.7 XML XML XML (XML declaration) (document type declaration) (root element) XML XML XML <?xml version="1.0"?> XML XHTML 1.1 XML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> XML XML 1.1.8 XML XML XML (namespace) XML XML (namespace name) XHTML http://www.w3.org/1999/xhtml XML QName (qualified name) QName xhtml:html ( : ) (namespace prefix) (local part) 1.1.9 (namespace declaration) xmlns: =" " xmlns:xhtml="http://www.w3.org/1999/xhtml" xhtml XHTML

1.2. SVG 13 <xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"> xhtml 1.1.10 XML QName (default namespace) (default namespace declaration) xmlns=" " xmlns="http://www.w3.org/1999/xhtml" XHTML 1.2 SVG 1.2.1 SVG SVG XML 2 SVG SVG (SVG document) SVG Scalable Vector Graphics SVG scalable vector graphics SVG XML W3C(World Wide Web Consortium) 1.2.2 (web browser) Opera Firefox Safari Amaya Google Chrome SVG SVG SVG SVG Opera SVG Opera 1.2.3 SVG SVG SVG SVG (SVG editor) SVG Inkscape SVG Cats Sketsa SVG Editor

14 1 SVG 1.2.4 SVG SVG SVG SVG SVG SVG SVG sample.svg <svg width="10cm" height="7cm" <rect x="1.5cm" y="1cm" width="7cm" height="4cm"/> sample.svg SVG.svg SVG 1 1.2.5 SVG SVG XML SVG XML XML sample.svg 1 XML 2 3 <svg width="10cm" height="7cm" <rect x="1.5cm" y="1cm" width="7cm" height="4cm"/> SVG svg SVG http://www.w3.org/2000/svg SVG sample.svg <rect x="1.5cm" y="1cm" width="7cm" height="4cm"/> rect 1.5cm 1cm 7cm 4cm 2.1 1.3 1.3.1 SVG (canvas) SVG (viewport)

1.3. 15 SVG svg width height SVG 8cm 12cm SVG viewport.svg <svg width="8cm" height="12cm" <rect x="0cm" y="0cm" width="8cm" height="12cm"/> 1.3.2 SVG 10 px mm 1mm = 3.543307px cm 1cm = 35.43307px in 1in = 90px pt 1pt = 1.25px pc 1pc = 15px em ex x % width="238pt" width 238 SVG 320 224 SVG lenunit.svg <svg width="320pt" height="224pt" <rect x="0pt" y="0pt" width="320pt" height="224pt"/> px SVG mm cm in pt pc px px 38px 38 1.3.3 SVG x y x y

16 1 SVG 1.3.4 px px viewbox=" " viewbox 4 px px viewbox 3 4 viewbox="0 0 700 500" 700 500 px SVG 3 2 px SVG definepx.svg <svg width="300pt" height="200pt" viewbox="0 0 3 2" <rect x="0" y="0" width="3" height="2"/> x y viewbox 1 2 viewbox="-30-60 700 500" x 30 y 60 SVG x 20 y 10 SVG origin.svg <svg width="300pt" height="200pt" viewbox="-20-10 300 200" <rect x="0" y="0" width="300" height="200"/> 1.4 1.4.1 rect fill SVG 16 10 3

1.4. 17 1.4.2 (color keyword) purple SVG SVG SVG red orange yellow SVG colword.svg <rect x="5" y="5" width="70" height="40" fill="red"/> <rect x="15" y="15" width="70" height="40" fill="orange"/> <rect x="25" y="25" width="70" height="40" fill="yellow"/> SVG SVG 1.4.3 16 16 # 2 16 16 #800080 SVG lime #00ff00 springgreen #00ff7f aqua #00ffff SVG colhex.svg <rect x="5" y="5" width="70" height="40" fill="#00ff00"/> <rect x="15" y="15" width="70" height="40" fill="#00ff7f"/> <rect x="25" y="25" width="70" height="40" fill="#00ffff"/>

18 1 SVG 1.4.4 10 10 rgb(,, ) 0 255 10 10 rgb(128, 0, 128) SVG blue rgb(0, 0, 255) blueviolet rgb(138, 43, 226) magenta rgb(255, 0, 255) SVG coldec.svg <rect x="5" y="5" width="70" height="40" fill="rgb(0, 0, 255)"/> <rect x="15" y="15" width="70" height="40" fill="rgb(138, 43, 226)"/> <rect x="25" y="25" width="70" height="40" fill="rgb(255, 0, 255)"/> 1.4.5 fill stroke stroke-width SVG 6 SVG stroke.svg <rect x="10" y="10" width="80" height="50" stroke-width="6" stroke="navy" fill="lavender"/> 1.4.6 stroke fill none SVG SVG none.svg

1.4. 19 <rect x="5" y="5" width="70" height="40" fill="aqua"/> <rect x="15" y="15" width="70" height="40" stroke-width="4" stroke="teal" fill="white"/> <rect x="25" y="25" width="70" height="40" stroke-width="4" stroke="turquoise" fill="none"/> 1.4.7 (opacity) 0 1 0 1 opacity SVG opacity.svg <?xml version="1.0" standalone="no"?> <rect x="10" y="20" width="80" height="30" fill="blue"/> <rect x="15" y="10" width="10" height="50" fill="lime" opacity="1.0"/> <rect x="35" y="10" width="10" height="50" fill="lime" opacity="0.8"/> <rect x="55" y="10" width="10" height="50" fill="lime" opacity="0.6"/> <rect x="75" y="10" width="10" height="50" fill="lime" opacity="0.4"/> stroke-opacity SVG stropac.svg <?xml version="1.0" standalone="no"?> <rect x="10" y="20" width="80" height="30" fill="blue"/> <rect x="15" y="10" width="10" height="50" fill="none" stroke-width="6" stroke="lime" stroke-opacity="1.0"/> <rect x="35" y="10" width="10" height="50" fill="none" stroke-width="6" stroke="lime" stroke-opacity="0.8"/> <rect x="55" y="10" width="10" height="50" fill="none" stroke-width="6" stroke="lime" stroke-opacity="0.6"/> <rect x="75" y="10" width="10" height="50" fill="none" stroke-width="6" stroke="lime" stroke-opacity="0.4"/>

20 1 SVG 1.5 1.5.1 SVG 1.5.2 g g <g> </g> g g g stroke-width stroke fill g g SVG group.svg <g stroke-width="3" stroke="blueviolet" fill="none"> <rect x="10" y="20" width="40" height="30"/> <rect x="20" y="10" width="70" height="30"/> <rect x="60" y="30" width="20" height="30" stroke="saddlebrown"/> </g> 1.5.3 g symbol symbol g g id symbol <symbol id=" "> <symbol id="cross"> <rect x="10" y="17" width="20" height="6"/> <rect x="17" y="10" width="6" height="20"/> </symbol> symbol 2 cross g symbol symbol symbol

1.6. 21 1.5.4 use use use xlink:href="# " ( # ) xlink XLink 3 XLink http://www.w3.org/1999/xlink xmlns:xlink="http://www.w3.org/1999/xlink" use x y x y SVG use.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="cross" fill="cadetblue"> <rect x="10" y="17" width="20" height="6"/> <rect x="17" y="10" width="6" height="20"/> </symbol> <use xlink:href="#cross"/> <use xlink:href="#cross" x="20" y="30"/> <use xlink:href="#cross" x="60" y="10"/> 1.6 1.6.1 (link) (hypertext) (anchor) URI(uniform resource identifier) URI URN(uniform resource name) URL(uniform resource locator) URI RFC2396 RFC 4 1.6.2 SVG a 3 XLink http://www.w3.org/tr/xlink/ 4 RFC(request for comment) IETF(Internet Engineering Task Force)

22 2 a a a xlink:href 1.5 use XLink a xlink:href URI URI SVG SVG linka.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="linkb.svg"> <rect x="20" y="25" width="60" height="20" fill="darkturquoise"/> </a> SVG linkb.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="linka.svg"> <rect x="20" y="10" width="60" height="20" fill="mediumseagreen"/> </a> <a xlink:href="http://www.example.org/"> <rect x="20" y="40" width="60" height="20" fill="hotpink"/> </a> 2 2.1 2.1.1 SVG 6 (basic shapes) rect circle ellipse line polyline polygon

2.1. 23 2.1.2 1.2 rect 6 x y width height rx ry x y x y rx SVG rect.svg <rect x="5" y="5" width="30" height="60" rx="5" ry="10" stroke-width="2" stroke="darkgreen" fill="palegreen"/> <rect x="15" y="20" width="70" height="30" rx="10" fill="limegreen"/> <rect x="65" y="5" width="30" height="60" rx="10" ry="5" stroke-width="2" stroke="darkolivegreen" fill="none"/> 2.1.3 circle 3 cx cy r x y SVG circle.svg <circle cx="30" cy="25" r="20" fill="orange"/> <circle cx="50" cy="35" r="20" stroke-width="4" stroke="brown" fill="coral"/> <circle cx="70" cy="45" r="20" stroke-width="4" stroke="chocolate" fill="none"/> 2.1.4 ellipse 4 cx cy rx ry x y x y SVG ellipse.svg

24 2 <ellipse cx="20" cy="35" rx="14" ry="28" fill="greenyellow"/> <ellipse cx="50" cy="35" rx="30" ry="20" stroke-width="3" stroke="yellowgreen" fill="springgreen"/> <ellipse cx="78" cy="35" rx="14" ry="28" stroke-width="3" stroke="forestgreen" fill="none"/> 2.1.5 line 4 2 x1 y1 x2 y2 1 x 1 y 2 x 2 y line fill SVG line.svg <line x1="10" y1="10" x2="90" y2="60" stroke-width="10" stroke="crimson"/> 2.1.6 polyline polyline points 2 points,,... x y points="10,20 40,30 70,10" 1 (10,20) 2 (40,30) 3 (70,10) SVG polyline.svg <polyline points="20,50 10,40 10,20 20,10 40,10 50,20 50,50 60,60 80,60 90,50 90,30 80,20 60,20 40,50" stroke-width="4" stroke="tomato" fill="khaki"/>

2.2. 25 2.1.7 polygon polygon polyline points points SVG polygon.svg <polygon points="20,50 10,40 10,20 20,10 40,10 50,20 50,50 60,60 80,60 90,50 90,30 80,20 60,20 40,50" stroke-width="4" stroke="indianred" fill="mistyrose"/> 2.2 2.2.1 (path) (path data) 2.2.2 path path path fill stroke-width stroke opacity stroke-opacity path d path d SVG SVG path.svg <path d="m10,10 L70,10 C140,80-20,70 50,30" stroke-width="4" stroke="chocolate" fill="aquamarine"/> 2.2.3 (command)...

26 2 x y x, y 1 (current point) 2.2.4 M m M ( m ) M200,100 (200,100) m200,-50 x 200 y 50 M M M 2.2.5 L l L ( l ) 1 L ( l ) L ( l ) SVG lineto.svg <path d="m30,15 l40,0 l0,40 l-40,0 l0,-40" stroke-width="10" stroke="darkslateblue" fill="none"/> 2.2.6 (close) Z z Z ( z ) Z z SVG close.svg <path d="m30,15 l40,0 l0,40 l-40,0 Z"

2.2. 27 stroke-width="10" stroke="darkslateblue" fill="none"/> 2.2.7 C c (Bézier curve) C ( c ) 3 C ( c ) (control point) 4 4 1 2 3 4 1 C ( c ) 3 2 3 4 C ( c ) 1 2 3 4 4 C ( c ) 4 SVG curveto.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="curve1" stroke-width="7" stroke="palegreen" fill="none"> <path d="m20,50 C10,25 50,10 40,50"/> </symbol> <symbol id="curve2" stroke-width="7" stroke="palegreen" fill="none"> <path d="m20,50 C10,25 40,50 50,10"/> </symbol> <symbol id="control" stroke-width="0.5" stroke="deeppink"> <line x1="20" y1="50" x2="10" y2="25"/> <line x1="50" y1="10" x2="40" y2="50"/> </symbol> <use xlink:href="#curve1"/> <use xlink:href="#control"/> <use xlink:href="#curve2" x="40"/> <use xlink:href="#control" x="40"/> 2.2.8 A a A ( a ) 7 1 x 2 y 3 x 4 1 (large arc) 0 (small arc) 5 1 (clockwise) 0 (counterclockwise) 6 x 7 y A ( a ) 6 7

28 2 4 4 5 180 180 SVG arcto.svg <g stroke-width="2" stroke="orangered" fill="none"> <path d="m10,35 a20,15 0 1,1 30,0"/> <path d="m60,10 a20,15 0 1,0 30,0"/> <path d="m10,55 a20,15 0 0,1 30,0"/> <path d="m60,50 a20,15 0 0,0 30,0"/> </g> 2.3 2.3.1 text text text path text fill stroke-width stroke opacity stroke-opacity text x y font-size x y SVG text.svg <text x="10" y="52" font-size="80" stroke-width="2" stroke="lightgreen" fill="aquamarine"> xy </text> <text x="14" y="40" font-size="12" fill="forestgreen"> I am a text. </text> 2.3.2 text font-size font-family font-weight

2.3. 29 font-style text-decoration font-family (generic font family name) serif sans-serif cursive fantasy monospace font-weight normal bold normal font-style normal italic oblique normal text-decoration none underline overline line-through SVG font.svg <g font-size="8" font-family="serif" fill="dodgerblue"> <text x="10" y="10"> serif </text> <text x="10" y="20" font-family="monospace"> monospace </text> <text x="10" y="30" font-weight="bold"> serif bold </text> <text x="10" y="40" font-style="italic"> serif italic </text> <text x="10" y="50" font-weight="bold" font-style="italic"> serif bold italic </text> <text x="10" y="60" text-decoration="underline"> serif underline </text> </g> 2.3.3 text word-spacing letter-spacing SVG space.svg

30 2 <g fill="forestgreen" font-size="10" font-family="serif"> <text x="10" y="14">i am a cat.</text> <text x="10" y="26" word-spacing="10">i am a cat.</text> <text x="10" y="38" word-spacing="-2">i am a cat.</text> <text x="10" y="50" letter-spacing="3">i am a cat.</text> <text x="10" y="62" letter-spacing="-1">i am a cat.</text> </g> 2.3.4 tspan text tspan SVG tspan.svg <g fill="navy" font-size="8" font-family="serif"> <text x="10" y="10"> I am <tspan fill="deeppink">not</tspan> a cat. </text> <text x="10" y="20"> I am <tspan font-size="16">not</tspan> a cat. </text> <text x="10" y="30"> I am <tspan font-family="san-serif">not</tspan> a cat. </text> <text x="10" y="40"> I am <tspan font-weight="bold">not</tspan> a cat. </text> <text x="10" y="50"> I am <tspan font-style="oblique">not</tspan> a cat. </text> <text x="10" y="60"> I am <tspan text-decoration="underline">not</tspan> a cat. </text> </g> 2.3.5 text x x text-anchor start middle end SVG anchor.svg

2.4. 31 <line x1="50" y1="5" x2="50" y2="65" stroke-width="0.2" stroke="red"/> <g fill="mediumblue" font-size="16" font-family="serif"> <text x="50" y="20" text-anchor="start">start</text> <text x="50" y="40" text-anchor="middle">middle</text> <text x="50" y="60" text-anchor="end">end</text> </g> 2.3.6 text textpath path path id=" " path textpath xlink:href="# " path xlink:href <defs> <path id="path1" d="m30,55 a35,23 0 1,1 40,0"/> </defs> defs path defs SVG textpath.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="path1" d="m30,55 a35,23 0 1,1 40,0"/> </defs> <text font-size="9" font-family="serif" fill="cadetblue"> <textpath xlink:href="#path1"> Yoda: Do or do not. There is no try. </textpath> </text> 2.4 2.4.1 SVG SVG (transformation) (translation) (scaling) (rotation) (skewing) transform rect

32 2 transform transform transform g use 2.4.2 translate( tx, ty ) transform x tx y ty transform="translate(40, 20)" x 40 y 20 SVG transla.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="cross" stroke-width="3"> <line x1="10" y1="20" x2="30" y2="20"/> <line x1="20" y1="10" x2="20" y2="30"/> </symbol> <use xlink:href="#cross" stroke="limegreen"/> <use xlink:href="#cross" transform="translate(20, 30)" stroke="navy"/> <g font-size="6" font-family="serif"> <text x="24" y="28" fill="limegreen">original</text> <text x="44" y="58" fill="navy">translate(20, 30)</text> </g> 2.4.3 transform scale( sx, sy ) x sx y sy transform="scale(1.4, 0.8)" x 1.4 y 0.8 y scale( sx ) y x SVG scale.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="cross" stroke-width="3">

2.4. 33 <line x1="10" y1="50" x2="30" y2="50"/> <line x1="20" y1="40" x2="20" y2="60"/> </symbol> <use xlink:href="#cross" stroke="limegreen"/> <use xlink:href="#cross" transform="scale(3, 0.3)" stroke="navy"/> <g font-size="6" font-family="serif"> <text x="24" y="58" fill="limegreen">original</text> <text x="60" y="24" fill="navy">scale(3, 0.3)</text> </g> 2.4.4 transform rotate( θ, cx, cy ) (cx, cy) θ transform="rotate(60, 40, 30)" (40,30) 60 SVG rotate.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="cross" stroke-width="3"> <line x1="20" y1="30" x2="60" y2="30"/> <line x1="40" y1="10" x2="40" y2="60"/> </symbol> <use xlink:href="#cross" stroke="limegreen"/> <use xlink:href="#cross" transform="rotate(60, 40, 30)" stroke="navy"/> <g font-size="6" font-family="serif"> <text x="50" y="38" fill="limegreen">original</text> <text x="46" y="53" fill="navy">rotate(60, 40, 30)</text> </g> 2.4.5 x transform skewx( θ ) x θ y θ skewx(30) x 30

34 2 skewy( θ ) y θ x θ SVG skew.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="cross" stroke-width="3"> <line x1="10" y1="20" x2="30" y2="20"/> <line x1="20" y1="10" x2="20" y2="30"/> </symbol> <use xlink:href="#cross" stroke="limegreen"/> <use xlink:href="#cross" transform="skewx(60)" stroke="navy"/> <use xlink:href="#cross" transform="skewy(50)" stroke="crimson"/> <g font-size="6" font-family="serif"> <text x="24" y="28" fill="limegreen">original</text> <text x="55" y="15" fill="navy">skewx(60)</text> <text x="33" y="58" fill="crimson">skewy(50)</text> </g> 2.4.6 transform 1 transform transform <g transform="translate(50, 20) scale(0.2, 0.4)"> </g> <g transform="translate(50, 20)"> <g transform="scale(0.2, 0.4)"> </g> </g> 1 transform SVG order.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="cross" stroke-width="3"> <line x1="10" y1="20" x2="30" y2="20"/> <line x1="20" y1="10" x2="20" y2="30"/> </symbol> <use xlink:href="#cross" stroke="limegreen"/> <use xlink:href="#cross" stroke="navy" transform="scale(3, 1) rotate(40, 20, 20)"/> <use xlink:href="#cross" stroke="crimson" transform="rotate(40, 20, 20) scale(3, 1)"/> <g font-size="4" font-family="serif"> <text x="14" y="36" fill="limegreen">original</text>

2.5. 35 <text x="46" y="32" fill="navy"> scale(3, 1) rotate(40, 20, 20) </text> <text x="12" y="60" fill="crimson"> rotate(40, 20, 20) scale(3, 1) </text> </g> 2.5 2.5.1 (end point) SVG stroke-linecap butt round square SVG linecap.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="hline" stroke-width="10" stroke="deepskyblue"> <line x1="20" y1="15" x2="80" y2="15"/> </symbol> <g stroke-width="0.1" stroke="darkorange"> <line x1="20" y1="5" x2="20" y2="65"/> <line x1="80" y1="5" x2="80" y2="65"/> </g> <use xlink:href="#hline" stroke-linecap="butt"/> <use xlink:href="#hline" y="20" stroke-linecap="round"/> <use xlink:href="#hline" y="40" stroke-linecap="square"/> <g font-size="6" font-family="serif" text-anchor="middle" fill="white"> <text x="50" y="17">butt</text> <text x="50" y="37">round</text> <text x="50" y="57">square</text> </g> 2.5.2 (join point) SVG stroke-linejoin miter round bevel SVG linejoin.svg

36 3 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="corner" stroke-width="8" stroke="greenyellow" fill="none"> <polyline points="5,60 30,20 55,60"/> </symbol> <use xlink:href="#corner" stroke-linejoin="miter"/> <use xlink:href="#corner" x="20" stroke-linejoin="round"/> <use xlink:href="#corner" x="40" stroke-linejoin="bevel"/> <g font-size="6" font-family="serif" text-anchor="middle" fill="steelblue"> <text x="30" y="10">miter</text> <text x="50" y="10">round</text> <text x="70" y="10">bevel</text> </g> 2.5.3 (dashed line) SVG stroke-dasharray 5, 2, 3, 4 5 2 3 4 SVG dash.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="stroke" stroke-width="5" stroke="midnightblue" fill="none"> <line x1="10" y1="15" x2="90" y2="15"/> </symbol> <use xlink:href="#stroke" stroke-dasharray="2"/> <use xlink:href="#stroke" y="14" stroke-dasharray="2, 5"/> <use xlink:href="#stroke" y="28" stroke-dasharray="2, 5, 8"/> <use xlink:href="#stroke" y="42" stroke-dasharray="2, 5, 8, 3"/> <g font-size="6" font-family="serif" fill="coral"> <text x="10" y="11">2</text> <text x="10" y="25">2, 5</text> <text x="10" y="39">2, 5, 8</text> <text x="10" y="53">2, 5, 8, 3</text> </g> 3

3.1. 37 3.1 3.1.1 1 (gradient) (gradient vector) SVG 2 (linear gradient) (radial gradient) 3.1.2 SVG (paint server) stroke fill url(# ) fill="url(#paintserver)" paintserver stroke fill 3.1.3 SVG lineargradient lineargradient id (gradient stop) lineargradient stop stop offset stop-color <stop offset="30%" stop-color="blue"/> 30% SVG linear.svg <lineargradient id="greenyellow"> <stop offset="0%" stop-color="green"/>

38 3 <stop offset="100%" stop-color="yellow"/> </lineargradient> <rect x="5" y="5" width="90" height="60" fill="url(#greenyellow)"/> 3.1.4 x1 y1 x2 y2 4 x1 y1 x2 y2 x1 0% y1 0% x2 100% y2 0% SVG vector.svg <lineargradient id="blueaqua" x1="0%" y1="100%" x2="100%" y2="0%"> <stop offset="0%" stop-color="blue"/> <stop offset="100%" stop-color="aqua"/> </lineargradient> <rect x="5" y="5" width="90" height="60" fill="url(#blueaqua)"/> 3.1.5 SVG radialgradient id stop SVG radial.svg <radialgradient id="lightdarkgreen"> <stop offset="0%" stop-color="lightgreen"/> <stop offset="100%" stop-color="darkgreen"/> </radialgradient> <rect x="5" y="5" width="90" height="60" fill="url(#lightdarkgreen)"/> 3.1.6 cx cy r x 50% y 50% 50% SVG center.svg

3.1. 39 <radialgradient id="whitenavy" cx="50%" cy="100%" r="100%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="navy"/> </radialgradient> <rect x="5" y="5" width="90" height="60" fill="url(#whitenavy)"/> 3.1.7 lineargradient radialgradient xlink:href SVG inherite.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <lineargradient id="yellowredmagenta" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="yellow"/> <stop offset="50%" stop-color="red"/> <stop offset="100%" stop-color="magenta"/> </lineargradient> <lineargradient id="west" xlink:href="#yellowredmagenta" x2="100%" y2="0%"/> <lineargradient id="north" xlink:href="#yellowredmagenta"/> <lineargradient id="northwest" xlink:href="#yellowredmagenta" x2="100%"/> <lineargradient id="southwest" xlink:href="#yellowredmagenta" y1="100%" x2="100%" y2="0%"/> <symbol id="rect"> <rect x="5" y="5" width="42.5" height="27.5"/> </symbol> <use xlink:href="#rect" fill="url(#west)"/> <use xlink:href="#rect" x="47.5" fill="url(#north)"/> <use xlink:href="#rect" y="32.5" fill="url(#northwest)"/> <use xlink:href="#rect" x="47.5" y="32.5" fill="url(#southwest)"/> 3.1.8 stop stop-opacity offset SVG opagra.svg <lineargradient id="opacitygradient"> <stop offset="0%" stop-color="navy" stop-opacity="1"/> <stop offset="100%" stop-color="navy" stop-opacity="0"/> </lineargradient>

40 3 <rect x="10" y="20" width="80" height="30" fill="aqua"/> <rect x="5" y="5" width="90" height="60" fill="url(#opacitygradient)"/> 3.2 3.2.1 SVG (pattern) 3.2.2 stroke fill url(# ) 3.2.3 SVG pattern pattern pattern width height width height SVG pattern.svg <pattern id="circlepattern" width="20%" height="25%"> <circle cx="4" cy="4" r="3" fill="skyblue"/> </pattern> <rect x="5" y="5" width="55" height="30" fill="url(#circlepattern)"/> <rect x="65" y="5" width="30" height="60" fill="url(#circlepattern)"/> 3.2.4 pattern patternunits userspaceonuse width height SVG userspc.svg

3.3. 41 <pattern id="circlepattern" patternunits="userspaceonuse" width="8" height="8"> <circle cx="4" cy="4" r="3" fill="turquoise"/> </pattern> <rect x="5" y="5" width="55" height="30" fill="url(#circlepattern)"/> <rect x="65" y="5" width="30" height="60" fill="url(#circlepattern)"/> 3.2.5 SVG nested.svg <pattern id="stripe" patternunits="userspaceonuse" width="2" height="20"> <line x1="1" y1="0" x2="1" y2="20" stroke-width="0.3" stroke="mediumblue"/> </pattern> <pattern id="circlepattern" width="33.3%" height="50%"> <circle cx="15" cy="15" r="14" fill="url(#stripe)"/> </pattern> <rect x="5" y="5" width="90" height="60" fill="url(#circlepattern)"/> 3.3 3.3.1 SVG (clipping) (clipping path) 3.3.2 clippath clippath clippath id <clippath id="circleclip"> <circle cx="50" cy="35" r="20"/> </clippath> clippath circleclip 3.3.3 g clip-path

42 3 url(# ) SVG clipping.svg <clippath id="ellipseclip"> <ellipse cx="50" cy="35" rx="45" ry="30"/> </clippath> <rect x="0" y="0" width="100" height="70" fill="navy"/> <g clip-path="url(#ellipseclip)"> <circle cx="0" cy="100" r="80" fill="lavender"/> <circle cx="20" cy="30" r="18" fill="lightsalmon"/> <circle cx="50" cy="5" r="16" fill="plum"/> <circle cx="120" cy="0" r="70" fill="lightyellow"/> <circle cx="80" cy="60" r="20" fill="crimson"/> </g> 3.4 3.4.1 SVG PNG JPEG image xlink:href x y width height URI x y SVG image.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image xlink:href="sample.jpg" x="5" y="5" width="90" height="60"/> 3.4.2 SVG image SVG SVG inner.svg <rect x="5" y="5" width="70" height="50" fill="orangered"/> <ellipse cx="60" cy="40" rx="35" ry="25" fill="royalblue"/>

43 SVG refsvg.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image xlink:href="inner.svg" x="5" y="5" width="40" height="30"/> <image xlink:href="inner.svg" x="25" y="20" width="70" height="50"/> 4 4.1 4.1.1 SVG (filter) SVG 4.1.2 filter id <filter id="donothing"/> filter donothing 4.1.3 filter filter (filter primitive) SVG SVG fegaussianblur (Gaussian blur) fegaussianblur stddeviation <filter id="blur"> <fegaussianblur stddeviation="2"/> </filter> filter blur 4.1.4 g filter

44 4 filter="url(# )" SVG filter.svg <filter id="blur"> <fegaussianblur stddeviation="2"/> </filter> <ellipse cx="50" cy="35" rx="40" ry="25" fill="limegreen" filter="url(#blur)"/> 4.1.5 feoffset feoffset dx dy dx x dy y feoffset filter filterunits="userspaceonuse" filterunits SVG offset.svg <filter id="offset" filterunits="userspaceonuse"> <feoffset dx="20" dy="10"/> </filter> <ellipse cx="40" cy="30" rx="35" ry="25" fill="lime"/> <ellipse cx="40" cy="30" rx="35" ry="25" fill="green" filter="url(#offset)"/> 4.1.6 filter SVG bluroffset SVG connect.svg <filter id="bluroffset" filterunits="userspaceonuse"> <fegaussianblur stddeviation="2"/> <feoffset dx="20" dy="10"/>

4.2. 45 </filter> <ellipse cx="40" cy="30" rx="35" ry="25" fill="crimson"/> <ellipse cx="40" cy="30" rx="35" ry="25" fill="orange" filter="url(#bluroffset)"/> in in SourceGraphic 4.1.7 (alpha channel) in SourceAlpha SVG alpha.svg <lineargradient id="opacitygradient"> <stop offset="0%" stop-color="lime" stop-opacity="0"/> <stop offset="100%" stop-color="lime" stop-opacity="1"/> </lineargradient> <filter id="offset" filterunits="userspaceonuse"> <feoffset dx="20" dy="10" in="sourcealpha"/> </filter> <g fill="url(#opacitygradient)"> <ellipse cx="40" cy="30" rx="35" ry="25"/> <ellipse cx="40" cy="30" rx="35" ry="25" filter="url(#offset)"/> </g> 4.2 4.2.1 result in 4.2.2 (merge) femerge femerge femergenode

46 4 femergenode in femerge SVG merge.svg <filter id="merge" filterunits="userspaceonuse"> <feoffset dx="20" dy="10" in="sourcegraphic" result="a"/> <feoffset dx="-20" dy="10" in="sourcegraphic" result="b"/> <feoffset dx="0" dy="-10" in="sourcegraphic" result="c"/> <femerge> <femergenode in="a"/> <femergenode in="b"/> <femergenode in="c"/> </femerge> </filter> <ellipse cx="50" cy="35" rx="25" ry="20" fill="greenyellow" filter="url(#merge)"/> 4.2.3 SVG shadow.svg <filter id="shadow" filterunits="userspaceonuse"> <fegaussianblur stddeviation="0.7" in="sourcealpha" result="blur"/> <feoffset dx="1.5" dy="1" in="blur" result="offset"/> <femerge> <femergenode in="offset"/> <femergenode in="sourcegraphic"/> </femerge> </filter> <text x="10" y="42" font-size="26" font-family="serif" fill="springgreen" filter="url(#shadow)"> shadow </text> 4.3 4.3.1 (composite) fecomposite fecomposite in in2 4.3.2

4.3. 47 fecomposite (compositing operation) operator 6 over in out atop xor arithmetic in2 in in in2 in in2 in in2 in2 in in2 arithmetic k1 k2 k3 k4 (k1 in in2) + (k2 in) + (k3 in2) + k4 SVG compo.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="over" filterunits="userspaceonuse"> <feoffset dx="5" dy="3" in="sourcealpha" result="offset"/> <fecomposite operator="over" in="sourcegraphic" in2="offset"/> </filter> <filter id="in" filterunits="userspaceonuse"> <feoffset dx="5" dy="3" in="sourcealpha" result="offset"/> <fecomposite operator="in" in="sourcegraphic" in2="offset"/> </filter> <filter id="out" filterunits="userspaceonuse"> <feoffset dx="5" dy="3" in="sourcealpha" result="offset"/> <fecomposite operator="out" in="sourcegraphic" in2="offset"/> </filter> <filter id="atop" filterunits="userspaceonuse"> <feoffset dx="5" dy="3" in="sourcealpha" result="offset"/> <fecomposite operator="atop" in="sourcegraphic" in2="offset"/> </filter> <filter id="xor" filterunits="userspaceonuse"> <feoffset dx="5" dy="3" in="sourcealpha" result="offset"/> <fecomposite operator="xor" in="sourcegraphic" in2="offset"/> </filter> <filter id="arithmetic" filterunits="userspaceonuse"> <feoffset dx="5" dy="3" in="sourcealpha" result="offset"/> <fecomposite operator="arithmetic" k1="0" k2="0.8" k3="0.2" k4="0" in="sourcegraphic" in2="offset"/> </filter> <symbol id="rect"> <rect x="20" y="7" width="20" height="14" fill="coral"/> </symbol> <g font-size="4" font-family="serif" fill="forestgreen"> <use xlink:href="#rect" filter="url(#over)"/> <text x="10" y="14">over</text> <use xlink:href="#rect" y="20" filter="url(#in)"/> <text x="10" y="34">in</text> <use xlink:href="#rect" y="40" filter="url(#out)"/>

48 4 <text x="10" y="54">out</text> <use xlink:href="#rect" x="45" filter="url(#atop)"/> <text x="55" y="14">atop</text> <use xlink:href="#rect" x="45" y="20" filter="url(#xor)"/> <text x="55" y="34">xor</text> <use xlink:href="#rect" x="45" y="40" filter="url(#arithmetic)"/> <text x="55" y="54">arithmetic</text> </g> 4.4 4.4.1 (lighting) fediffuselighting fespecularlighting x y z 3 z xy z z 4.4.2 fedistantlight azimuth elevation xy 0 z 4.4.3 (diffuse reflection) fediffuselighting surfacescale diffuseconstant lighting-color 1 z 4.4.4 (1) z (2) (3) fecomposite in

4.4. 49 (4) fecomposite arithmetic SVG diffuse.svg <filter id="difflight" filterunits="userspaceonuse"> <fegaussianblur stddeviation="4" in="sourcealpha" result="blur"/> <fediffuselighting surfacescale="20" diffuseconstant="0.4" lighting-color="white" in="blur" result="diff"> <fedistantlight azimuth="-150" elevation="30"/> </fediffuselighting> <fecomposite operator="in" in="diff" in2="sourcealpha" result="compoin"/> <fecomposite operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in="sourcegraphic" in2="compoin"/> </filter> <ellipse cx="50" cy="35" rx="35" ry="20" stroke-width="20" stroke="mediumblue" fill="none" filter="url(#difflight)"/> 4.4.5 (specular reflection) fespecularlighting surfacescale specularconstant specularexponent lighting-color 1 z 1 128 SVG specular.svg <filter id="speclight" filterunits="userspaceonuse"> <fegaussianblur stddeviation="4" in="sourcealpha" result="blur"/> <fespecularlighting surfacescale="20" specularconstant="0.7" specularexponent="8" lighting-color="white" in="blur" result="spec"> <fedistantlight azimuth="-150" elevation="30"/> </fespecularlighting> <fecomposite operator="in" in="spec" in2="sourcealpha" result="compoin"/> <fecomposite operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in="sourcegraphic" in2="compoin"/> </filter> <ellipse cx="50" cy="35" rx="35" ry="20" stroke-width="20" stroke="mediumblue" fill="none" filter="url(#speclight)"/>

50 5 5 5.1 5.1.1 (animation) SVG SVG SVG 5.1.2 SVG (animation element) animate animatecolor animatetransform animatemotion set 5.1.3 xlink:href attributename from to dur repeatcount fill animatemotion (starting value) (ending value) (duration) ( h ) ( min ) ( s ) ( ms ) indefinite freeze remove 5.2 5.2.1 animate SVG animate circle cx SVG attricx.svg

5.2. 51 <circle cy="35" r="5" fill="lightseagreen"> <animate attributename="cx" from="15" to="85" dur="10s" repeatcount="3" fill="freeze"/> </circle> SVG animate rect opacity SVG attrio.svg <ellipse cx="50" cy="35" rx="40" ry="25" fill="dodgerblue"/> <rect x="5" y="5" width="90" height="60" fill="mediumblue"> <animate attributename="opacity" from="1" to="0" dur="10s" repeatcount="indefinite"/> </rect> 5.2.2 animate SVG rect animate SVG attriwh.svg <rect x="10" y="10" fill="darkcyan"> <animate attributename="width" from="10" to="80" dur="10s" repeatcount="indefinite"/> <animate attributename="height" from="50" to="10" dur="10s" repeatcount="indefinite"/> </rect> 5.2.3 fill stroke animate animatecolor animate SVG animatecolor ellipse fill SVG attrif.svg <ellipse cx="50" cy="35" rx="40" ry="25"> <animatecolor attributename="fill" from="skyblue" to="yellowgreen" dur="5s" repeatcount="indefinite"/> </ellipse>

52 5 5.3 5.3.1 animatetransform animatetransform attributename transform animatetransform type translate scale rotate skewx skewy x y from to 5.3.2 animatetransform from to x, y x x y y SVG animtra.svg <g fill="chocolate"> <circle cx="0" cy="0" r="5"/> <circle cx="5" cy="0" r="5"/> <animatetransform attributename="transform" type="translate" from="0, 0" to="100, 70" dur="5s" repeatcount="indefinite"/> </g> 5.3.3 animatetransform from to x, y x x y y y x y x SVG animsca.svg <g transform="translate(50, 60)">

5.3. 53 <text x="-40" y="0" font-size="10" font-family="serif" fill="darkgreen"> animatetransform <animatetransform attributename="transform" type="scale" from="1" to="20" dur="10s" repeatcount="indefinite"/> </text> </g> 5.3.4 animatetransform from to θ, x, y θ x y SVG animrot.svg <g> <g stroke-width="2" stroke="steelblue"> <line x1="40" y1="35" x2="60" y2="35"/> <line x1="50" y1="25" x2="50" y2="45"/> </g> <text x="55" y="45" font-size="14" font-family="serif" fill="cadetblue"> rotate </text> <animatetransform attributename="transform" type="rotate" from="0, 50, 35" to="360, 50, 35" dur="5s" repeatcount="indefinite"/> </g> 5.3.5 animatetransform from to SVG animske.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="cross" stroke-width="3"> <line x1="10" y1="20" x2="30" y2="20"/> <line x1="20" y1="10" x2="20" y2="30"/> </symbol> <use xlink:href="#cross" stroke="navy"> <animatetransform attributename="transform" type="skewx" from="0" to="70" dur="5s" repeatcount="indefinite"/> </use> <use xlink:href="#cross" stroke="crimson"> <animatetransform attributename="transform" type="skewy" from="0" to="70" dur="5s" repeatcount="indefinite"/> </use> <use xlink:href="#cross" stroke="limegreen"/>

54 5 5.4 5.4.1 animatemotion animatemotion attributename animatemotion path path path path id path defs path path animatemotion mpath mpath <mpath xlink:href="# "/> path URI xlink:href SVG animoti.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="path1" d="m65,10 a25,25 0 1,1 0,50 l-30,0 a25,25 0 1,1 0,-50 z"/> </defs> <use xlink:href="#path1" stroke-width="0.3" stroke="blue" fill="none"/> <rect x="-20" y="0" width="20" height="5" fill="tomato"> <animatemotion dur="20s" repeatcount="indefinite"> <mpath xlink:href="#path1"/> </animatemotion> </rect> 5.4.2 animatemotion rotate auto SVG autoro.svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="path1" d="m65,10 a25,25 0 1,1 0,50 l-30,0 a25,25 0 1,1 0,-50 z"/>

55 </defs> <use xlink:href="#path1" stroke-width="0.3" stroke="blue" fill="none"/> <rect x="-20" y="0" width="20" height="5" fill="tomato"> <animatemotion dur="20s" repeatcount="indefinite" rotate="auto"> <mpath xlink:href="#path1"/> </animatemotion> </rect> 6 CSS 6.1 CSS 6.1.1 CSS XML (style) XML CSS(Cascading Style Sheets) CSS W3C SVG SVG CSS CSS SVG SVG (style sheet) (style sheet file) CSS.css 6.1.2 SVG XML (style sheet processing instruction) <?xml-stylesheet type=" MIME " href=" URI "?> MIME (MIME type) / CSS MIME text/css URI SVG URI CSS rect.css SVG SVG XML <?xml-stylesheet type="text/css" href="rect.css"?> SVG CSS rect.css rect { fill: blue;

56 6 CSS SVG SVG sspi.svg <?xml-stylesheet type="text/css" href="rect.css"?> <rect x="10" y="10" width="80" height="50"/> 6.1.3 SVG SVG style style style type MIME CSS MIME text/css 6.1.4 CDATA XML XML CDATA (CDATA section) CDATA <![CDATA[ ]]> ]]> XML CDATA XML XML style CDATA <style type="text/css"><![cdata[ ]]></style> SVG style CSS SVG style.svg <style type="text/css"><![cdata[ rect { fill: green; ]]></style> <rect x="10" y="10" width="80" height="50"/> 6.2 6.2.1 (rule)

6.2. 57 rect { fill: blue; rect { fill: blue; rect { fill: blue; 6.2.2 (selector) circle { fill: red; circle 6.2.3 ({) () (declaration) { fill: green; stroke: aqua; 6.2.4 : ; fill: green; fill green (property) fill stroke (value) 6.2.5 CSS ( : ) CSS /* */

58 6 CSS 6.3 6.3.1 SVG class (class name) class (class selector) (dot). class rect.special special class rect. class.css rect.normal { fill: blue; rect.special { fill: red;.deluxe { fill: green; SVG class.svg <?xml-stylesheet type="text/css" href="class.css"?> <rect class="normal" x="5" y="5" width="42" height="28"/> <rect class="special" x="53" y="5" width="42" height="28"/> <rect class="deluxe" x="5" y="37" width="42" height="28"/> <ellipse class="deluxe" cx="74" cy="51" rx="21" ry="14"/> 6.3.2 ID id ID (ID selector) ID (sharp) # id #id000

6.3. 59 id000 id id.css #id000 { fill: teal; #id001 { fill: orange; #id002 { fill: crimson; #id003 { fill: palegreen; SVG id.svg <?xml-stylesheet type="text/css" href="id.css"?> <rect id="id000" x="5" y="5" width="42" height="28"/> <rect id="id001" x="53" y="5" width="42" height="28"/> <ellipse id="id002" cx="26" cy="51" rx="21" ry="14"/> <ellipse id="id003" cx="74" cy="51" rx="21" ry="14"/> 6.3.3 XML CSS (descendant selector) #id000 rect.normal #id000 rect.normal... descend.css #id000 rect { fill: skyblue; #id000 ellipse { fill: greenyellow; #id001 rect { fill: indigo; #id001 ellipse { fill: chocolate; SVG descend.svg <?xml-stylesheet type="text/css" href="descend.css"?>