SVG

Scalable Vector Graphics (SVG) - 2D vector image format, based on XML syntax

  • SVG is based on coordinate system. lines and curves are being drawn on top of it, being linked to specific coordinates
  • coordinate system starting point (0, 0) is top left corner
  • since SVG represents vector graphics, SVG images are scalable
  • SVG is most often used for icons, simple graphics and animation

<svg>

<svg> - SVG's root element

xmlns="http://www.w3.org/2000/svg" - otherwise will not work

version - version of the SVG specification. it helps to ensure compatibility with SVG rendering engines

  • 1.1 - is commonly used language

Sizing

viewport - is the size of <svg> element

  • it is defined with width & height attributes
  • viewport can be treated as a container for SVG graphics itself


width - sets the width of SVG
height - sets the height of SVG

  • 24 - pure numbers represent pixels. height="24" equals height="24px"
  • 50% - percentages are counted relatively to the parent element
  • 100% - default value for width & height
  • width & height as well as other attributes can be overwritten with CSS styles


viewBox - rectangular mask, which sets the visible part of SVG. it is used to either display image fully or a portion of it

  • viewBox="minX minY width height" - syntax. minX & minY set viewBox starting point
  • viewBox is like a frame, which slides on the photo wallpaper and shows up part of it, scaling that part to the size of the viewport
  • e.g. viewBox="0 0 24 24" - frame starts at coordinates (0, 0), expands to the width and height of 24 units. icon 24x24 will be shown fully
  • ideally viewBox should reflect SVG native size. in case viewBox is bigger, it extends coordinate system making image smaller
  • e.g. viewBox="0 0 50 50" for an image of size 25x25 - image will take forth part of viewPort, placed in top left corner


preserveAspectRatio - defines how SVG should be displayed when viewport's aspect ratio differs from viewBox's

  • xMidYMid meet - default behaviour. image displays fully, taking as much width or height of viewport as possible, being positioned in center
  • <align> - defines at which side of viewport to place an image. e.g. xMinYMin - stick to top left corner; xMidYMax - stick to bottom center
  • meet - makes sure that entire viewBox fits into the viewport. edges of the viewBox meet edges of the viewport. like "background-size: contain"
  • slice - scales viewPort to fill as much of the viewport as possible. this results in cropping an image. like "background-size: cover"
  • using "meet" is optional. it is default over "slice"
  • none - do not preserve aspect ratio. image will be squashed to fit the whole viewport. it doesn't require neither "meet" nor "slice"
  • note: if viewBox frames image, but displayed in disproportional viewport with "meet", SVG graphics from outside the viewBox will be visible


native size - the size of coordinate system which was used to create SVG

  • e.g. <path d="M 0 0 L 100 100" /> - native size of SVG including this path is 100x100


aspect ratio - amount of particles for width and for height, like on physical photograph

  • e.g. 2:1 - 2 for width, 1 for height

Shapes

<rect> - rectangle

x - from starting point
y
width
height
rx - border radius on x axis
ry - border radius on y axis

<circle> - circle

cx - distance from starting point to the center
cy
r - radius

<ellipse> - ellipse

cx
cy
rx - radius on x axis
ry - radius on y axis

<line>

x1
y1
x2
y2

<polyline> - like line, but with many points

  • polyline can't be used to build closed shape


points="x1,y1,x2,y2,…"

<polygon> - like polyline, but closed. i.e. starting point matches ending point

points="x1,y1,x2,y2,…"

<path>

<path> - describes the vector path. this is generic element, which can be used to create any shape

  • use-cases:
  • shape creation
  • clipping path
  • creating animation
  • creating text on a path
  • e.g. <path d="M 10 10 V 100 M 10 50 L 50 10 M 10 50 L 50 100" stroke="purple" /> - draw letter K
  • path is much more concise and flexible alternative to creating SVG with specific shape elements


d - draw. specifies the commands, which result in some shape

Commands

absolute commands - count coordinates from the origin (top-left corner). such commands are defined with uppercase letters
relative commands - count coordinates from the current position. such commands are defined with lowercase letters

SVG defines 6 types of path commands. totally there are 20 commands

move to - set starting point or move the drawing cursor to specified point without drawing anything

  • M / m (x y) - e.g. M 10 10 - move the drawing cursor to coordinates (10, 10)
  • if another pair of coordinates is provided after M without specifying command, it is treated as coordinates for L command. e.g. M 10 10 15 15
  • in SVG commas can replace spaces between any coordinates, or can be mixed with spaces for additional visual separation. e.g. M 10 10, 15 15
  • separation between command and coordinate is optional. e.g. M10 10


line to - draw a straight line from the current point to a specified point

  • L / l (x y) - line to
  • H / h (x) - horizontal line to
  • V / v (y) - vertical line to


cubic Bezier curve - draw a curve to a specified point, with two control points

  • C / c (x1 y1, x2 y2, x y) - start control point is specified by x1 y1. end control point is specified by x2 y2. e.g. C 20 30, 40 40, 50 50
  • S / s (x2 y2, x y) - smooth cubic Bezier curve. end control point is specified by x2 y2


quadratic Bezier curve - draw a curve to a specified point, with one control point. i.e. arc of an ellipse

  • Q / q (x1 y1, x y) - control point is specified by x1 y1
  • T / t (x y) - smooth quadratic Bezier curve


elliptical arc curve - curve defined as an arc of an ellipse. might be useful for simple curves

  • A / a (rx ry angle large-arc-flag sweep-flag x y)


close path - draw a straight line back to the starting point of the path. it closes the current path

  • Z

Example

this is an example of diagonal line created with SVG. such SVG can be used as data URL in CSS url() to mark softly deleted content 

<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  viewBox="0 0 100 100"
  preserveAspectRatio="none"
>
  <path d="M1 1 L99 99" stroke="rgb(212 212 212)" />
</svg>

JS Methods

getTotalLength() - returns length of path

Decor

fill - set color for inner part of closed shape

  • this is analog of background color

Stroke

stroke - set color for path

  • for closed shape this is analog of border color


stroke-width

  • 1 - default


stroke-linecap - sets how stroke is displayed at start and end of open shape

  • butt - default
  • round
  • square


stroke-linejoin - sets how stroke is displayed in places where path lines join

  • miter - default


stroke-dasharray - split path into dashes

  • 20 - dashed line, 20px each dash and 20px each gap
  • 20 10 - dashes and gaps of different sizes


stroke-dashoffset - set the offset for all dashes

  • 100 - each dash offsets 100px aback
  • this CSS property can be animated. it will result in slipping effect

SVG can also contain <style> tag with inline styles within markup

Animation

Animate <path>

  1. set stroke-dasharray to the length of path. length can be figured out with getTotalLength()
  2. offset dash to the length of path. gap will cover the entire path, so it will be not visible
  3. decrease offset gradually till 0. this will make path grow

MDN - SVG

;