Вы находитесь на странице: 1из 35

Scalable Vector Graphics

SVG ,
(W3C)
XML,

- XML.

http://ie.microsoft.com/testdrive/Performance/FishIETank/Default.html

http://www.adobe.com/svg
SVG files provide resolution independent, high resolution dots per inch
(HiDPI) graphics on the web, in print, and on mobile devices in a compact format. The
ability to style SVG with CSS and the support of scripting and animation makes SVG an
integral part of the web platform.
SVG is ideal for interactive, data-driven, personalized graphics. It is a royaltyfree, vendor neutral open standard developed under the W3C (World Wide Web
Consortium) process, and widely supported by modern web browsers.

SVG
o
o
o

o
o

SVG , ,
JPEG GIF, .
c SVG
.
SVG
, (, ,
.)
SVG , , ,
,
.
SVG SMIL (Synchronized Multimedia Integration Language),
W3C. SVG- JavaScript. SVG
, ( ,
, , .)
SVG . , SVG -
.
SVG HTML XHTML . SVG
<object>, data .svg. width height
SVG . SVG HTML
DHTML.
CSS (Cascading Style Sheets). ( ) SVG
CSS.
4

.., . . ..-


W3C Scalable Graphics Requirements

;
;
;
;
.

;
;
;
;
();
;
.

;
;
;
;
;
.

;
;
;
;
.

;
.

SVG
5

.., . . ..-

vector
,
.
.

SVG
6
.., . . ..-


http://www.03www.ru/2013-02/svg/index.html

SVG
7
.., . . ..-

C
(, ,
, , , . .).
- ,

.
,
: , , . .

.

(, , ..)
JavaScript ,
.

SVG
8
.., . . ..-



http://www.03www.ru/2013-02/svg/index.html

<line x1="10" y1="10" x2="300" y2="20" stroke="black" />

<polyline points="10,10 100,10 10,100 100,100" />

<rect x="50" y="50" width="400" height="200" rx="20" />

<polygon points="10,10 90,10 100,50 40,150 " stroke="black" />

<circle cx="140" cy="140" r="54" fill=none stroke=blue/>

<circle cx="140" cy="140" r="54" fill=red stroke-width="5"/>

<ellipse cx="140" cy="140" rx="50" ry="100" fill="yellow"/>

.., . . ..-


(Quadratic)
P0, P1 P2
.

M10 10 Q 160,150 200,10


P0 M10,10. .
P1 160,150. , .
P2 200,10. .
Q .

(Cubic)
: P0, P1, P2 P3, .

:
M10 10 C 160,150 200,10 300,150
P0 M10 10 . .
P1 P2 160,150 200,10. , .
P3 300,150 . .
() .


10
.., . . ..-

<path>
,
:
c d path ,
.
, (
).
, (L, H,
V) (P0, P1, P2, P3, Q, C).

<path d="M10 10 H100 L10 100 H100 Z" stroke="black" fill="none" />
M\m : x y
L\l .
H\h x.
V\v y.
Z\z .

SVG
11

.., . . ..-


<animate>

<animate> :
1. attributeType .
2. attributeName .
3. from .
4. to .
5. dur .
6. repeatCount .
attributeType - : CSS, XML auto.
attributeName -
.
from to - , ,
.
repeatCount -
indefinite.
12
.., . . ..-

<animate attributeType="XML"
attributeName="fill"
from="red"
to="yellow"
<?xml version="1.0" encoding="UTF-8"?>
dur="5s"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
repeatCount="indefinite" />
<title>Circle animation</title>
<circle cx="140" cy="140" fill="red" r="">
<animate attributeType="XML"
attributeName="r"
from="25"
to="100"
dur="5s"
repeatCount="indefinite" />
</circle>
</svg>

13
.., . . ..-

CSS3
http://xhtml.co.il/ru/CSS3/2D-

http://habrahabr.ru/post/135816/

2D :
CSS
translate() -
<html>
rotate() -
<head>
<style>
scale() -
div { width:200px;
skew() x y
height:100px;
matrix() 6-
background-color:yellow;
http://xhtml.co.il/ru/CSS3/3D-
3D :
rotateX()
rotateY()

-ms-transform:rotate(30deg);
text-align:right; }
</style>
</head>
<body> <div>Hello, !</div> </body>
</html>

14
.., . . ..-


<animateTransform>
SVG ,
CSS3, transform.

<animateTransform>.
attributeName transform, attributeType
XML CSS.
CSS3.

<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
fill="ForestGreen"
additive="replace" from="0" to="360" dur="2s"
repeatCount="indefinite" />
15

<?xml version="1.0" encoding="UTF-8"?>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>Rotate rect</title>
<g transform="translate(200,200)">
<rect fill="ForestGreen" width="200" height="100">
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" fill="ForestGreen" additive="replace" from="0" to="360" dur="2s"
repeatCount="indefinite" />
</rect>
</g>
</svg>
rotate_rect.svg
16
.., . . ..-


<animateColor>
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>Animation size and color</title>
<circle fill="" cx="340" cy="340" r="">
<animate attributeType="XML" attributeName="r" from="5" to="230" dur="10s"
repeatCount="indefinite" />
<animateColor attributeName="fill" from="red" to="green" dur="5s"
repeatCount="indefinite" />
</circle>
</svg>
__.svg
17
.., . . ..-

CSS

<?xml version="1.0" standalone="no"?>


<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="200"
xmlns="http://www.w3.org/2000/svg" version="1.1">

<rect x="95" y="45" width="80" height="80" fill="none"


stroke="red">
<animate attributeType="CSS" attributeName="stroke-width"
from="0" to="75" dur="5s"
repeatCount="indefinite"/>
</rect>
</svg>

18
.., . . ..-


SVG
.
<animateMotion>.
animateMotion
path .
<path>.
path-data

.

http://y3x.ru/2011/07/svg-animatemotion/
19
.., . . ..-


<animateMotion>
:
<animateMotion path="M20 20 L 40 0" dur="10s" />
:
begin .
end .
min .
max .
restart .
repeatDur - .
repeatCount - .
fill .
calcMode - .
values .
additive , .
accumulate - , "" .
from
to
by
dur

http://webix.pro/svg/spravochnik/elementy/animatemotion.html
20
.., . . ..-

<svg width="300px" height="200px" version="1.1" viewbox="0 0 300 200"


xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="2" width="296" height="196"
style="fill:#000000;stroke:#cbcbcb" stroke-width="2px" />
<circle cx="75" cy="60" r="15" fill="yellow" >
<animateMotion begin="2s" dur="5s" repeatCount="indefinite"
path="m 0,0
c 0,0 -56,7 -53,32
3,24 20,62 46,69
26,6 66,-55 90,-53
23,2 18,43 38,55
16,9 59,-10 74,-38
14,-28 8,-85 -19,-96 z " />
</circle>
animateMotion
</svg>
21
.., . . ..-

http://dunaevv1.narod.ru/examples/svg/map.htm

_3.svg

.svg

MovingEx_1.svg

22
.., . . ..-

SVG
, SVG
,
17 - 19.
http://www.ibm.com/developerworks/ru/library/wa-scalable/

23
.., . . ..-

SVG
: .svg

SVG
24
.., . . ..-

SVG Web-
XML- SVG HTML-
<html> <head> <title>Embedded SVG</title> </head>
<body style="height: 600px;width: 100%; padding: 30px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" fill="red"/> </svg>
</body>
</html>

XML- SVG <embed>


<embed src="circle.svg" type="image/svg+xml" />

XML- SVG <object>


<object data="circle.svg" type="image/svg+xml"></object>

XML- SVG <iframe>


<iframe src="circle1.svg"></iframe>
25
.., . . ..-

SMIL

SMIL , W3C
. SVG
. GIF, , SVG
,
. SVG, SMIL
XML.

Synchronized Multimedia Integration Language

SVG
26
.., . . ..-

SMIL JavaScript
, SMIL , .
,

JavaScript.
SVG - DOM,
: - getElementById,
- setAttribute, - .
Raphael.
http://raphaeljs.com/world/
- .

SVG :
http://wiki.svg.org/Design_Tools.
27
.., . . ..-

http://www.03www.ru/2013-02/svg/index.html

SVG
28

.., . . ..-

SVG

;
, ;
;
DOM;
HTML XHTML;
JavaScript CSS;
;
W3C SVG;
SVG .

29
.., . . ..-

Inkscape;
SVG-edit;
SVG Viewer.

Adobe Illustrator;

CorlDraw;

Scribus.

Mozilla Firefox;

Opera;

Apple Safari;

Google Chrome;

Internet Explorer.
SVG
30

.., . . ..-

http://www.inkscape.org/

31

Inkscape

http://habrahabr.ru/post/81633/ - Inkscape
.., . . ..-

32

http://www.w3.org/TR/SVG/
SVG 1.1 14 :

http://apike.ca/prog_svg.html SVG Tutorial


http://www.kevlindev.com/tutorials/basics/index.htm Tutorials
.., . . ..-

33

No comments!

34

http://www.w3schools.com/svg/

35
.., . . ..-

Оценить