{"id":9291,"date":"2022-10-06T04:36:42","date_gmt":"2022-10-06T04:36:42","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=9291"},"modified":"2022-10-06T04:36:42","modified_gmt":"2022-10-06T04:36:42","slug":"svg-in-html5","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/10\/06\/svg-in-html5\/","title":{"rendered":"SVG in HTML5"},"content":{"rendered":"\n<p>In HTML5, the SVG elements can be embedded directly into your HTML page.<\/p>\n\n\n\n<p>If the SVG is written in XML, all elements should be appropriately closed!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"shape-elements-in-svg-3\">Shape elements in SVG<\/h2>\n\n\n\n<p>SVG has some predetermined shape elements. Here they are:<\/p>\n\n\n\n<ul><li>rectangle &lt;rect><\/li><li>circle &lt;circle><\/li><li>ellipse &lt;ellipse><\/li><li>line &lt;line><\/li><li>polyline &lt;polyline><\/li><li>polygon &lt;polygon><\/li><li>path &lt;path><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-of-embedding-svg-into-html-page-5\">Example of embedding SVG into HTML page:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Title of the document&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;svg width=\"300\" height=\"200\"&gt;\n      &lt;circle cx=\"150\" cy=\"100\" r=\"50\" stroke=\"purple\" stroke-width=\"5\" fill=\"pink\" \/&gt;\n    &lt;\/svg&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Now let&#8217;s understand the code:<\/p>\n\n\n\n<ul><li>An SVG image always starts with an &lt;svg&gt; tag.<\/li><li>The SVG image&#8217;s width and height are specified by the&nbsp;width&nbsp;and&nbsp;height&nbsp;attributes of the &lt;svg&gt; element.<\/li><li>The &lt;circle&gt; element draws a circle.<\/li><li>The&nbsp;cx&nbsp;and&nbsp;cy&nbsp;attributes specify the x and y coordinates of the circle&#8217;s center. If cx and cy are absent, the center of the circle is set to (0, 0).<\/li><li>The&nbsp;r&nbsp;attribute is used to specify the radius of the circle.<\/li><li>The stroke and&nbsp;stroke-width&nbsp;attributes control the appearance of the outline of a shape. In our code example, we have set the outline of the circle to a 5px purple &#8220;border.&#8221;<\/li><li>The&nbsp;fill&nbsp;attribute sets a color within the circle. We set it to pink.<\/li><li>The SVG image is closed with the closing &lt;\/svg&gt; tag.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In HTML5, the SVG elements can be embedded directly into your HTML page. If the SVG is written in XML, all elements should be appropriately closed! Shape elements in SVG SVG has some predetermined shape elements. Here they are: rectangle &lt;rect> circle &lt;circle> ellipse &lt;ellipse> line &lt;line> polyline &lt;polyline> polygon &lt;polygon> path &lt;path> Example of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[574],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9291"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=9291"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9291\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}