1 / 50

Mastering SVG Basics: A Comprehensive Guide to Understanding Scalable Vector Graphics

Learn the fundamentals of SVG, including coordinate systems, document size adjustments, adding text, and transformations. Gain insights into raster vs. vector graphics, supported browsers, editing tools like Inkscape, and more.

lunaj
Download Presentation

Mastering SVG Basics: A Comprehensive Guide to Understanding Scalable Vector Graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Contents • SVG basics • SVG documentation • Coordinate systems • SVG editor: Inkscape • Changing document size • Adding text • SVG visualization in CIF • SVG transformations • CIF format function fmt • SVG keyboard shortcuts • SVG scaling using viewBox

  2. Graphics • Raster graphics: consisting of pixels • Vector graphics: mathematical description of objects

  3. Raster graphics • Consisting of pixels • Each pixel is a dot of the graphic • Scales badly • Examples • Photos • Computer displays

  4. Vector graphics • Mathematical description of drawing by means of coordinates, vectors, objects, transformations • Examples: • CAD/CAM drawings • SVG: Scalable Vector Graphics • For displaying on computer screen • vector description converted to pixels • achieves maximum sharpness for all possible display resolutions SVG object definition <circle style="fill:green;stroke:black;stroke-width:2" id=“my_green_circle" cx=“10" cy=“10" r=“100" /> SVG graphical representation

  5. SVG standard • SVG is the international World Wide Web (W3C) Consortium standard for 2D vector graphics • Supported by all modern browsers • Supported by several graphical editors, such as • Inkscape: open source, free download, uses svg as native file format • Illustrator: exports to svg • CorelDRAW: exports to svg

  6. SVG documentation

  7. SVG file format • Subset of XML (Extensible Markup Language) • XML widely adopted format that is • Human readable • Machine readable • Open standard • Extensive tool support

  8. SVG example <svg> <rect x="10“ y="10" height="50" width="50" rx="5" ry="5“ style="stroke:#006600;fill:#00cc00“ /> <rect x="70" y="10" height="50" width="50" rx="10" ry="10“ style="stroke:#006600; fill: #00cc00“ /> </svg> Resulting rectangles:

  9. SVG dimensions • SVG base units are pixels • SVG units are converted to pixels via a fixed PPI (Pixels Per Inch) conversion factor:

  10. SVG display scaling • Size of SVG drawing on computer monitor depends on display resolution • Display resolution in DPI (Dots Per Inch) • Each display dot consists of a red, green and blue display element • SVG pixel is mapped to a display dot • Most common computer resolution is 96 DPI, especially on old monitors • 1 inch SVG picture is displayed as • ≈ 1 inch on 96 DPI conventional computer monitor • ≈ 0.4 inch on high resolution monitor (220/227 PPI Macbook Pro retina)

  11. SVG editor: Inkscape

  12. Inkscape characteristics • SVG graphical editor • Saves and opens in SVG • Free • Open source • Powerful • To download, Google search “Inkscape download” (latest version 0.92) • Available for Windows, Mac, Linux

  13. Coordinate systems • Inkscape coordinate system • origin bottom left • positive y values up • SVG coordinate system • origin top left • positive y values down • originating from text on computer displays

  14. Inkscape XML inspector • Ctrl-Shift-X to open inspector • Hierarchical view of graphical objects in left pane • Attributes of selected object in right pane

  15. Changing Inkscape document size • Default Inkscape document size is A4. • A4 is too big for SVG display in CIF (zoom to 1:1 using numeric 1 key). • Therefore, we need to resize to document to a smaller size. • What happens when changing the size? • Let’s change the size of a 600 x 900 pixel document from portrait to landscape.

  16. Resizing document in Inkscape 1 • Resizing document in Inkscape, keeps Inkscape position of objects in drawing, relative to lower left origin, unchanged • Consequences for SVG coordinates, relative to upper left origin? • Height reduction of document in Inkscape shifts objects up in SVG space • Instead of changing all SVG coordinates:Inkscape adds SVG transformation in top layer

  17. Resizing document in Inkscape 2 Undo transformation added by Inkscape, due to change of svg document height, by deleting transform attribute in the svg layer. Delete attribute Select transform attribute layer 1

  18. Inkscape removing transform attribute in layer • After removing transform attribute in drawing layer, SVG coordinates are retained. • Reducing height of document, followed by removing Inkscape induced transformation from drawing layer, effectively results in: • bottom of document moving upwards, closer to top of document. • drawing appearing to move downwards (respective to bottom margin).

  19. Adding text to Inkscape SVG drawing • Insert text: select Text Tool, then first click, then type • inserts an SVG text element • Do NOT insert text by dragging a text box instead of clicking • inserts an SVG flowRoot element • leads to CIF error in console when simulating: • ERROR: File "tank.cif": Semantic error at line 1, column 9: SVG image file "tank.svg" is not an SVG file, is an invalid SVG file, or contains unsupported SVG features. • ERROR: Failed to load CIF file "tank.cif": the file has errors.

  20. SVG visualization in CIF: Documentation • SVG visualization documentation

  21. Basic principles • Visualization of a CIF model is achieved by connecting parts of the state of the CIF model to attributes of an SVG drawing. • At specific time points during simulation of a CIF model, the SVG drawing is updated to reflect the state of the CIF model. • A visualization is thus a sequence of displayed SVG drawings.

  22. Pusher: • body =rect4345 • shaft • head

  23. Connecting CIF to SVG svgfile"pusher.svg"; svgoutid"shaft"attr"width"value40+40* x; svgoutid"head"attr"x"value200+40* x; constreal V =2; constrealx_max=4; algbool a; cont x =0; equation x'=ifx_max<= x :if a:0else-V end elif0< x :if a: V else-V end elseif a: V else0end end; equation a =iftime<2:falseeliftime<4:trueelsefalseend;

  24. Demo 1_pusher_svg_head_x.tooldef2 from"lib:cif3"import*; cif3sim( "pusher_svg.cif", "-t7", "-iauto", "--frame-rate=40", //"--speed=1", );

  25. SVG transformations How to make visualizations independent of absolute positions of objects? By using SVG transformations: svgoutid"head"attr"x"value200+40* x; svgoutid"head"attr"transform" value fmt("translate(%s,0)",40* x);

  26. Add attribute simply by typing new attribute name: transform And typing value: translate(40) Then Ctrl-Enter

  27. New attribute

  28. Inkscape drawing after attr: transform value: translate(40,0)

  29. CIF fmt function

  30. Search “fmt” in CIF website • Text formatting tutorial • Text formatting details

  31. fmt function calculation • Calculate value of second parameter expression: 40 * x • Replace %s in the first parameter by the resulting value (40 * x) represented as a string • Return the resulting string

  32. Real-time visualization procedure • For frame-rate of 20: every 50 ms, new frame is calculated • Simulation proceeds in steps of 50 ms each (1/20 s) • After each 50 ms: • New value of all variables is calculated (x in model of pusher) • All SVG statements in model are (re)evaluated • svgoutid"shaft"attr"width"value40+40* x; • svgoutid"head"attr"transform"valuefmt("translate(%s,0)",40* x); • SVG file is updated in memory • SVG drawing is redrawn based on updated SVG file in memory

  33. SVG groups

  34. Some SVG transforms

  35. Nested transforms • Transforms can be applied in sequence, the innermost transform is applied first • Suppose a group with id “child” is nested in a group with id “parent”, then the combination of the two CIF statements in 1. has a similar effect as either statement 2. or 3, assuming no other transforms are present: • svgoutid"parent"attr"transform"value"translate(x,y)";svgoutid"child"attr"transform"value"scale(2)"; • svgoutid"parent"attr"transform"value"translate(x,y) scale(2)"; • svgoutid"child" attr"transform"value"translate(x,y) scale(2)";

  36. Unintentional overriding of transforms

  37. Debugging visualizations In case of strangely behaving visualizations: • Right click > Save as (on a running simulation / visualization in Eclipse) • Open and inspect the saved SVG file in Inkscape

  38. Inkscape keyboard shortcuts: viewing

  39. Inkscape keyboard shortcuts: drawing

  40. Scaling using viewBox (advanced concept) • If the CIF SVG visualization is too big or too small, it can be resized by means of the viewBox attribute of the top level SVG element • viewBox defines a rectangle: • viewBox(x0, y0, xmax, ymax) • (x0, y0) is origin of viewBox • (xmax, ymax) is lower right corner • Default width and height of viewBox are set equal to SVG drawing coordinates

  41. Scaling using viewBox • To increase/decrase the size of the resulting displayed SVG: • increase/decrease the width and height of the top-level SVG object • keep viewBox unchanged • Resulting drawing in viewBox is resized so that it fits in larger/smaller top-level SVG object, keeping the ratio of the drawing unchanged • Changing the origin of the viewBox to a positive non-zero (x, y) point clips (cuts off) all points from the drawing to the left and up from the (x, y) point • More info: http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

  42. Example 1 viewBox • Original attributes of top-level SVG object: • width = 800 • height = 600 • viewBox(0, 0, 800, 600) (equivalent to viewBox attribute not present) • New attributes of top-level SVG object: • width = 1200 • height = 900 • viewBox(0, 0, 800, 600) • Resulting SVG drawing is 1.5 times the size of the original

  43. Example 2 viewBox • Original attributes of top-level SVG object: • width = 800 • height = 600 • viewBox(0, 0, 800, 600) (equivalent to viewBox attribute not present) • New attributes of top-level SVG object: • width = 1600 • height = 900 • viewBox(0, 0, 800, 600) • Resulting SVG drawing is shown at 1.5 times the size of the originalNew drawing contains additional empty space to the right due to increased width

  44. Example 3 viewBox • Original attributes of top-level SVG object: • width = 800 • height = 600 • viewBox(0, 0, 800, 600) (equivalent to viewBox attribute not present) • New attributes of top-level SVG object: • width = 350 • height = 250 • viewBox(100, 100, 800, 600) • Resulting SVG drawing displays only to the right and below new viewBox origin (100, 100) and displays it at half the size

  45. Scaling via Inkscape • Scaling can also be done by changing the required attributes via the Document Properties in Inkscape, see next slide. • The document properties panel in Inkscape also includes a Scale setting. • The Scale setting is not an SVG attribute; it reflects the width (height) of the viewbox divided by the width (height) of the top-level SVG object, a.k.a. the document width (height).

More Related