The document provides an overview of Scalable Vector Graphics (SVG), highlighting its advantages such as scalability, customization, and animation capabilities, as well as its uses for icons, charts, and diagrams. It includes instructions on drawing various shapes in SVG, methods for embedding SVG in web pages, and resources for further learning. The document also contrasts SVG with standard image formats like PNG and JPEG, noting both pros and cons.

1. SVG Overview:
How To Draw, Use And
Animate
Bartosz Bazański

2. What is SVG?
S V G
SCALABLE VECTOR GRAPHIC

3. What are SVG good for?
Standard image (PNG, JPEG, etc.)
- complex images

4. What are SVG good for?
SVG (Scalable Vector Graphic)
- icons and logos,
- charts,
- infographics,
- diagrams,
- models,
- simple illustrations

5. Conversion
Standard
picture
SVG
Source: https://www.pngtosvg.com

6. How to draw?
viewbox=“Px
, Py
, maxWidth, maxHeight”
maxWidth
maxHeight
P
xmlns=“http://www.w3.org/2000/svg”

7. How to draw?
stroke ⇔ border-color
fill ⇔ background-color
stroke-width ⇔ border-width
P1(0,2)
P2(1,4)
P3(4,0)

8. How to draw?
● circle,
● ellipse,
● rectangle,
● line,
● polygon,
● polyline,
● path.
C(x,y)r

9. How to draw?
● circle,
● ellipse,
● rectangle,
● line,
● polygon,
● polyline,
● path.
C(x,y)rx
ry

10. How to draw?
● circle,
● ellipse,
● rectangle,
● line,
● polygon,
● polyline,
● path.
P(x,y)
width
height

11. How to draw?
● circle,
● ellipse,
● rectangle,
● line,
● polygon,
● polyline,
● path.
P1 P2

12. How to draw?
● circle,
● ellipse,
● rectangle,
● line,
● polygon,
● polyline,
● path. P1
P2
P3 P4
P5

13. How to draw?
● circle,
● ellipse,
● rectangle,
● line,
● polygon,
● polyline,
● path.
P1 P2
P3 P4
P5 P6
P7

14. How to draw?
● circle,
● ellipse,
● rectangle,
● line,
● polygon,
● polyline,
● path.

15. The end result :)
Source: http://codinginparadise.org

16. How to put it on the page?
● in the image tag,
● in CSS,
● embedded directly into HTML,
● in the object tag.
Source: https://css-tricks.com/using-svg

17. SVG magic a.k.a Animations

18. SVG magic a.k.a Animations

19. SVG magic a.k.a Animations
Source: https://github.com/cgoldsby/LoginCritter

20. SVG magic a.k.a Animations
Source: http://themaninblue.com/experiment/Blobular

21. Browser support
Source: https://caniuse.com/#feat=svg

22. Pros and Cons
Standard image (PNG, JPEG, etc.) SVG (Scalable Vector Graphic)
+ can be cached easily by
the browser,
+ able to present complex
images.
+ highly scalable,
+ easily customizable,
+ light,
+ animations,
+ can be embedded
directly inside html.
− cannot be scaled,
− can be quite heavy,
− limited customizing
options,
− no animations (only GIF),
− separate request.
− limited cache
possibilities,
− can make html code
messy.

23. Libraries - D3.js
Source: https://github.com/d3/d3

24. Libraries - React Kawaii
Source: https://github.com/miukimiu/react-kawaii

25. Resources
● PNG to SVG: https://www.pngtosvg.com,
● Coding in Paradise: http://codinginparadise.org,
● Login Critter: https://github.com/cgoldsby/LoginCritter,
● Blobular: http://themaninblue.com/experiment/Blobular,
● Can I Use It: https://caniuse.com/#feat=svg,
● D3.js: https://github.com/d3/d3,
● React Kawaii: https://github.com/miukimiu/react-kawaii.

26. Thanks you for your attention.