SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with...
Transcript of SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with...
![Page 1: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/1.jpg)
SVGSVG
This is the vector graphics "drawing" technology with itstechnical and creative beauty
SVG Inkscape vectors
1
![Page 2: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/2.jpg)
SVGSVGSVG = Scalable Vector Graphics is an integratedstandard for drawing
Along with other standards, it replaces plugintechnologies like Flash
There is an open source drawing tool called Inkscape,which outputs SVG, and which can be used instead ofproprietary tools like Illustrator
2
![Page 3: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/3.jpg)
InkscapeInkscapeThe leading open source tool for editing SVG drawingsis Inkscape (or possibly online tools such as svg-edit)
You can also use an editor with XML support for reallysimple drawings
The tiger is a famous SVG drawing
SVG concentrates on drawing, but also has moderatesupport for text, images, filters and animation
3
![Page 4: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/4.jpg)
Status of SVGStatus of SVGSee wikipedia: SVG for overview, news on status, links
See the 1.1 standard and the MDN tutorial
The SVG standard is fairly stable, with version 1.1 beingthe main current version, with version 2 under way
There is reasonable support in modern browsers, withseveral fallback possibilities for old browsers.
For animation, JS is used to change the SVG objects(SVG has its own built-in animation, but it is not fullyprogrammable and obsolescent)
4
![Page 5: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/5.jpg)
Status of InkscapeStatus of InkscapeInkscape was developed as a graphic designer's drawingtool, and is excellent in many ways, but not perfect
SVG is its internal format, but it doesn't support all ofSVG, and you need to choose "plain SVG" export toavoid mess
On the other hand, it provides an XML tree-view of thesource which allows you to add some things whichInkscape itself doesn't yet support
It can crash, and has some pitfalls for beginners, so saveyour work often
5
![Page 6: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/6.jpg)
htmlhtml
The object tagThe object tagYou can use img but then JS can't get at it, so useobject:
<<objectobject datadata=="demo.svg""demo.svg" typetype=="image/svg+xml""image/svg+xml">> ... text for non-SVG browsers ...... text for non-SVG browsers ... </</objectobject>>
SVG
An SVG file can be compressed into .svgz format
6
![Page 7: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/7.jpg)
htmlhtml
Direct inclusionDirect inclusionAnother possibility is to include the SVG text directly inthe page:
<<pp>> <<svgsvg xmlnsxmlns=="http://www.w3.org/2000/svg""http://www.w3.org/2000/svg"......>> ...... </</svgsvg>> </</pp>>
SVG
7
![Page 8: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/8.jpg)
Source TextSource TextIt is important to understand the SVG source format, inorder to make the best use of the tools, check standardscompliance, write animation scripts, or write programswhich generate or manipulate SVG
So if you are using Inkscape:
Use Inkscape's XML view (<x> button), maybe edit theXML tree, export as plain SVG, maybe edit the result
8
![Page 9: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/9.jpg)
svgsvg
Overall StructureOverall Structure<<svgsvg versionversion=="1.1""1.1" xmlnsxmlns=="http://www.w3.org/2000/svg""http://www.w3.org/2000/svg" widthwidth=="800""800" heightheight=="600""600" viewBoxviewBox=="0 0 800 600""0 0 800 600">> . . . . . . </</svgsvg>>
The xmlns attribute is necessary to specify what tagsare allowed, and width, height, viewBox may need to beset manually in Inkscape
9
![Page 10: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/10.jpg)
CoordinatesCoordinatesYou can set width and height in any absolute units, thedefault being browser pixels, or you can set them to100% to mean that the drawing will scale to whateversize you give it on the web page
If you want to allow stretching, you can add thepreserveAspectRatio="none" attribute
The viewBox coordinates specify what units to usewithinwithin the SVG file, and these are arbitrary floatingpoint units, not integer pixel units, so choose them foryour convenience
10
![Page 11: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/11.jpg)
CompositingCompositingThe shapes inside the <svg> element are drawn in theorder they appear, on top of one another
Shapes have colour and opacity, and are combined bycompositing using the formulas from the PNG chapter,or their pre-multiplied versions
The default background is "transparent black", so thebrowser background shows through
To prevent that, make the first shape a full-size opaquerectangle
11
![Page 12: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/12.jpg)
VectorsVectorsA vector is a line between two points, but it also has adirection, which you can think of as the direction whichit is drawn in
GO
Press the button to see the direction
12
![Page 13: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/13.jpg)
PathsPathsA path is a sequence of vectors
GO
Press the button to see the path
13
![Page 14: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/14.jpg)
StrokeStrokeA path is mathematically precise, and infinitely thin
To make it visible, you have to stroke it, meaning drawalong it with a given thickness
GO
Press the button
14
![Page 15: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/15.jpg)
FillFillA second operation to make a path visible is to fill it
GO
Press the button
15
![Page 16: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/16.jpg)
SplinesSplinesCurves made out of straight vectors are inefficient andnot scalable, so splines are used
A spline was originally a bendy piece of wood helddown with weights called ducks(!)
16
![Page 17: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/17.jpg)
Bézier SplinesBézier SplinesBézier curves are simple and quick for online use
Other kinds, B-splines and NURBS, may be better foroffline modelling and 3-D work
Think of a spline as the simplest curve joining twopoints, where you control the directions at each end(and how persistent those directions are)
17
![Page 18: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/18.jpg)
Joining SplinesJoining SplinesControlling the directions of the ends means you canmake a smooth path out of splines; it is traditional toillustrate with a duck
18
![Page 19: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/19.jpg)
Special ShapesSpecial ShapesSVG has tags for special shapes, namely <rect>, <circle>,<ellipse>, <line>, <polyline>, <polygon>
These add nothing because they are all drawn withpaths (possibly made curvy with splines)
Using special tags helps to preserve the intention of theauthor and/or improve editing and/or reduce downloadtime
Beware that tools may not preserve them, but maylossily transform them into paths
19
![Page 20: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/20.jpg)
CrossingCrossingAs far as possible, SVG puts no limitations on shapes, sothat many different operations succeed
For example, a path can cross itself arbitrarily, and oneof the rules for filling is "evenodd"
20
![Page 21: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/21.jpg)
Disjoint PathsDisjoint PathsThe vectors of a single path need not be joined up
GO
Press the button
(One vector is invisible and instant)
21
![Page 22: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/22.jpg)
Boolean OperationsBoolean OperationsDisjoint paths mean that shapes can be combined byunion, difference, intersection, exclusion
22
![Page 23: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/23.jpg)
svgsvg
Compact PathsCompact PathsBecause everything is made of paths, a compactrepresentation is needed, so an SVG 100x100 square canbe written:
<<pathpath dd=="M 0 0 L 100 0 L 100 100 L 0 100 L 0 0""M 0 0 L 100 0 L 100 100 L 0 100 L 0 0">>
Here M stands for "Move to" (without drawing), L for"draw a Line to" etc, and no commas etc are needed
This helps keep download times small, even withoutcompression
23
![Page 24: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/24.jpg)
GroupsGroupsShapes can be grouped using the <g> tag
Leaving the group information in place rather thanreplacing the shapes by a single combined shape helpswith editing, applying transformations both to a groupand to a single shape within a group, etc.
Groups are an object-oriented and much moreconvenient version of layers, and layers are easilysimulated using groups (as Inkscape does)
There is also a facility for defining shapes as re-usablesymbols or templates
24
![Page 25: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/25.jpg)
TransformsTransformsShapes can be translated, rotated, scaled and skewedusing the usual 2x3 matrices
The original and the transform(s) are usually storedseparately, to prevent cumulative rounding errors
25
![Page 26: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/26.jpg)
TextTextText is represented using paths, but the original text iskept to allow search
The text can be transformed, or written along a curvedpath, but it can still be searched, copied and pasted, andindexed by Google
Problem: platform fonts are used by default but this israrely correct, proper SVG fonts are difficult, so Webfonts are usually best
26
![Page 27: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/27.jpg)
Anti-aliasingAnti-aliasingShapes, including text, are turned into pixels at the lastmoment, so any aliasing problems are only ever at thetrue device resolution
SVG viewers then optionally do a final anti-aliasing stepon all sharp edges
27
![Page 28: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/28.jpg)
ImagesImagesPixel based images in PNG or JPEG format can beincluded in or referenced from an SVG drawing
The usual transformations can be applied, but the rawdata is kept to avoid loss of precision
To cope with the mismatch between the pixel matrix ofthe transformed image and the device, re-sampling isused to keep the quality high
Images can be composited, and used in clipping andmasking in the same way as all other shapes
28
![Page 29: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/29.jpg)
FiltersFiltersSVG supports the application of painting-style filters toall shapes
Inkscape supports some of these filters, and toleratesmore, so you can still use Inkscape in an edit-and-preview style
The filters can be used for standard effects such aspseudo-3D, drop shadows and so on, which make a lot ofdifference to the perceived interest of drawings
29
![Page 30: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/30.jpg)
svgsvg
StyleStyleSVG supports style, e.g. via CSS, as with other XMLlanguages, and most properties can be representedequally by direct attributes or using style attributes:
<<rectrect fillfill=="#ff0000""#ff0000"....../>/> <<rectrect stylestyle=="fill:#ff0000;...""fill:#ff0000;..."/>/>
The first form is preferred for properties which are partof the drawing, or for animation etc.
The second form is supposed to be used only for aapplying a changeable site style to all drawings on a site,e.g. background colour
30
![Page 31: SVG - GitLab · SVG = Scalable Vector Graphics is an integrated standard for drawing Along with other standards, it replaces plugin technologies like Flash There is an open source](https://reader030.fdocuments.net/reader030/viewer/2022040810/5e5094def0a00c3de52e2abd/html5/thumbnails/31.jpg)
svgsvg
AnimationAnimationThere are two ways to animate SVG: with JavaScript, orwith SVG's own declarative animation (not fullyprogrammable, obsolescent) - for the latter, start with:
<<svgsvg xmlnsxmlns=="http://www.w3.org/2000/svg""http://www.w3.org/2000/svg" xmlns:xlinkxmlns:xlink=="http://www.w3.org/1999/xlink""http://www.w3.org/1999/xlink" ......>> ......
This tells XML browsers that you may want to use XMLcompatible references of the type xlink:href="x"from one element to another with id="x"
31