{"id":9305,"date":"2022-10-06T04:42:18","date_gmt":"2022-10-06T04:42:18","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=9305"},"modified":"2022-10-06T04:42:18","modified_gmt":"2022-10-06T04:42:18","slug":"svg-path","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/10\/06\/svg-path\/","title":{"rendered":"SVG Path"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"description-of-the-lt-path-gt-element-1\">Description of the &lt;path&gt; element<\/h2>\n\n\n\n<p>The SVG &lt;path&gt; element specifies a path.<\/p>\n\n\n\n<p>Paths are used to create complex shapes combining several straight or curved lines. Complex shapes that consist only of straight lines can be created as\u00a0polylines. Polylines and paths create similar shapes. However, polylines need smaller straight lines for simulating curves.<\/p>\n\n\n\n<p>Creating complex paths using an XML editor or text editor is not suggested, because understanding how they work helps to notice and fix display issues in\u00a0SVGs.<\/p>\n\n\n\n<p>The shape of a path element is specified by one parameter: d containing other commands and parameters used by those commands. You can find the list of the commands below:<\/p>\n\n\n\n<ul><li>M = moveto<\/li><li>L = lineto<\/li><li>H = horizontal lineto<\/li><li>V = vertical lineto<\/li><li>C = curveto<\/li><li>S = smooth curveto<\/li><li>Q = quadratic B\u00e9zier curve<\/li><li>T = smooth quadratic B\u00e9zier curveto<\/li><li>A = elliptical Arc<\/li><li>Z = closepath<\/li><\/ul>\n\n\n\n<p>All of these commands can also be executed with lower letters. Capital letters mean an absolutely positioned shape, whereas lower cases mean a relatively positioned shape.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-of-the-svg-lt-path-gt-element-5\">Example of the SVG &lt;path&gt; element:<\/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=\"250\"&gt;\n      &lt;path d=\"M190 40 L115 240 L265 240 Z\" \/&gt;\n      Sorry, inline SVG is not supported by your browser..\n    &lt;\/svg&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Description of the &lt;path&gt; element The SVG &lt;path&gt; element specifies a path. Paths are used to create complex shapes combining several straight or curved lines. Complex shapes that consist only of straight lines can be created as\u00a0polylines. Polylines and paths create similar shapes. However, polylines need smaller straight lines for simulating curves. Creating complex paths [&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\/9305"}],"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=9305"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9305\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}