For you to learn the concept and basics of SVG, this tutorial will just use plain text to teach you SVG. The next page shows how to embed an SVG image directly into an HTML page!

SVG is a language for describing 2D graphics in XML, while Canvas draws 2D graphics, on the fly (with JavaScript). SVG is XML based, which means that every element is available within the …

SVG Clipping and Masking <clipPath>: Remove a part from an element <mask>: Apply a rectangular mask to an element <mask>: Apply a circular mask to an element <mask>: Fill …

SVG Text - <text> The <text> element is used to define a text. The <text> element has seven basic attributes to position and rotate the text:

Embed SVG Directly Into HTML Pages Here is an example of a simple SVG graphic: ... and here is the HTML code:

SVG Animation SVG elements can be animated. In SVG, we have four animation elements which sets or animates SVG graphics: <set> <animate> <animateTransform> <animateMotion>

SVG Image - <image> The <image> element is used to insert an image in SVG. SVG software must support JPEG, PNG, and other SVG files. The <image> element has some basic …

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML and more.

SVG Shapes SVG has some predefined shape elements that can be used by developers: Rectangle <rect> Circle <circle> Ellipse <ellipse> Line <line> Polyline <polyline> Polygon …

The gradient definitions are placed within the <defs> or the <svg> element. The <defs> element is short for "definitions", and contains definition of special elements (such as gradients).