SVG HTML - SwatiMaurya08/html-notes GitHub Wiki

SVG

SVG stands for Scalable Vector Graphics.

SVG defines vector-based graphics in XML format.

In HTML5, you can embed SVG elements directly into your HTML pages.

Example:

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg> 
 
</body>
</html>

SVG Code explanation:

  • An SVG image begins with an <svg> element
  • The width and height attributes of the <svg> element define the width and height of the SVG image
  • The <circle> element is used to draw a circle
  • The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are not set, the * * circle's center is set to (0, 0)
  • The r attribute defines the radius of the circle
  • The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 4px green "border"
  • The fill attribute refers to the color inside the circle. We set the fill color to yellow
  • The closing </svg> tag closes the SVG image

Note: Since SVG is written in XML, all elements must be properly closed!

SVG Shapes

SVG has some predefined shape elements that can be used by developers:

  1. Rectangle <rect>
  2. Circle <circle>
  3. Ellipse <ellipse>
  4. Line <line>
  5. Polyline <polyline>
  6. Polygon <polygon>
  7. Path <path>

SVG Stroke Properties

SVG offers a wide range of stroke properties. In this chapter we will look at the following:

  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-dasharray

All the stroke properties can be applied to any kind of lines, text and outlines of elements like a circle.

SVG Filters

SVG Filters are used to add special effects to SVG graphics.

SVG Filter Elements In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG.

The available filter elements in SVG are:

  1. <feBlend> - filter for combining images
  2. <feColorMatrix> - filter for color transforms
  3. <feComponentTransfer>
  4. <feComposite>
  5. <feConvolveMatrix>
  6. <feDiffuseLighting>
  7. <feDisplacementMap>
  8. <feFlood>
  9. <feGaussianBlur>
  10. <feImage>
  11. <feMerge>
  12. <feMorphology>
  13. - filter for drop shadows
  14. <feSpecularLighting>
  15. <feTile>
  16. <feTurbulence>
  17. <feDistantLight> - filter for lighting
  18. <fePointLight> - filter for lighting
  19. <feSpotLight> - filter for lighting

SVG Gradients

A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied to the same element.

There are two main types of gradients in SVG:

  1. Linear
  2. Radial

SVG Linear Gradient - <linearGradient>

The <linearGradient> element is used to define a linear gradient.

The <linearGradient> element must be nested within a <defs> tag. The <defs> tag is short for definitions and contains definition of special elements (such as gradients).

Linear gradients can be defined as horizontal, vertical or angular gradients:

  • Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ
  • Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ
  • Angular gradients are created when x1 and x2 differ and y1 and y2 differ
⚠️ **GitHub.com Fallback** ⚠️