SVG offers a large variety of ways to draw lines, shapes and patterns. It can draw, display, merge or manipulate images with formats such as png, jpeg,gif,tiff, and other media. SVG offers a variety of methods to achieve
SVG can be viewed as standalone XML
XML can be embedded inside HTML documents
It is fully supported within HTML / CSS and JS and the DOM
Image media defined in SVG are vector-based and therefore fully scalable and adaptable without any compromise on quality or color.
It is also widely supported across browsers.
SVG in HTML
Namespace
When we want to include SVG media inside HTML (embedded or drawn), we must declare a namespace for the XML specification. This namespace only has to be declared once in the document body. After the first declaration all other SVG elements on the page will use that same namespace
Style attributes
Most of the SVG style attributes can be declared in CSS in case of direct SVG drawing using < path >, not when SVG image is used to display an external image
Scaling
If we want the SVG to scale itself, we must define a viewBox in the attributes as follows viewBox='x y w h'
SVG <image>
The SVG image element allows for raster images to be rendered within an SVG object.
SVG <path>
SVG possibilities
SVG path allows us to draw a vector image using straight lines
M x y : Move To - Defines the starting point for the drawing cursor
L x y : Line To - Draws a line to the defined point. ( line from M to L )
H x : Horizontal Line - Draws a horizontal line from the current point to x
V
Z : Close Path - Draws a line from the last point back to the first point of the path.
C : Cubic Bezier - Draws a cubic Bezier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. Multiple sets of coordinates may be specified to draw a polybezier.
SVG tricks
Use CSS classes to apply complex styles
If you are applying multiple attributes to a single element, the characters can add up. However, the moment you apply that complex class to multiple elements, you start to see savings. However, keep in mind CSS doesn’t work inside Data URIs.
Group elements with the same styles
If you have three elements that all have a fill of purple, you could simply wrap them in a group tag and only need one fill attribute to affect all three elements. This can work for most attributes and even with CSS classes.
The use element
CSS Wiki
When you take actions across the internet, we'll provide links to that activity here.