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!

Examples explained SVG Fill Use the fill attribute to set the fill color of graphics Use the fill-opacity attribute to set opacity for fill color Use the fill-rule attribute for a polygon, with value "evenodd" …

SVG defines vector-based graphics in XML, which can be directly embedded in HTML pages. SVG graphics are scalable, and do not lose any quality if they are zoomed or resized:

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>

The fill attribute can be used with the following SVG elements: <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> and <tspan>. The value of the fill …

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 …

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 …

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.