{"id":84,"date":"2023-05-23T15:05:08","date_gmt":"2023-05-23T15:05:08","guid":{"rendered":"http:\/\/svg-presentation.local\/?page_id=84"},"modified":"2023-05-24T15:28:50","modified_gmt":"2023-05-24T15:28:50","slug":"svg-code","status":"publish","type":"page","link":"https:\/\/jeffmcnear.com\/wpsvg\/svg-code\/","title":{"rendered":"SVG CODE"},"content":{"rendered":"\n<p>The .SVG format is the only image format that is expressed in readable code which is designed to be directly manipulated by CSS. <\/p>\n\n\n\n<p>Some syntax basics:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8220;d&#8221; = attribute defines the path to be drawn<\/li>\n\n\n\n<li>the default value for stroke  = none <\/li>\n\n\n\n<li>the default value for fill = #000 (black)<\/li>\n\n\n\n<li>recognized shapes: rectangle &lt;rect&gt; ; circle &lt;circle&gt;; ellipse &lt;ellipse&gt;; line&lt;line&gt;; polyline &lt;polyline&gt;; path &lt;path&gt;<\/li>\n\n\n\n<li>for a deeper dive go <a href=\"https:\/\/www.w3schools.com\/graphics\/svg_intro.asp\" data-type=\"URL\" data-id=\"https:\/\/www.w3schools.com\/graphics\/svg_intro.asp\">he<\/a><a href=\"https:\/\/www.w3schools.com\/graphics\/svg_intro.asp\" data-type=\"URL\" data-id=\"https:\/\/www.w3schools.com\/graphics\/svg_intro.asp\" target=\"_blank\" rel=\"noreferrer noopener\">re<\/a><\/li>\n<\/ul>\n\n\n\n<p><strong>UN-STYLED<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-cyan-bluish-gray-background-color has-background\"><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\n&lt;svg id=\"Layer_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 650 645.2\"&gt;\n&lt;path d=\"m387.3,69.6v2c0,33.2-26.9,60.1-60.1,60.1s-60.2-26.9-60.2-60.1c0-.7,0-1.3.1-2h-32.1v150.4h120.3v116.3h60.2V69.6h-28.2Z\"\/&gt;\n&lt;path d=\"m296.1,427.5v-116.3h-60.1v266.7h29.1v-.5c0-33.2,26.9-60.2,60.2-60.2s60.1,26.9,60.1,60.2v.5h31.1v-150.4h-120.4Z\"\/&gt;\n&lt;path d=\"m575.6,376.1c-33.2,0-60.1-26.9-60.1-60.2s26.9-60.2,60.1-60.2c1.7,0,3.4.1,5,.2v-24.8h-150.4v120.3h-116.3v60.2h266.7v-35.8c-1.7.2-3.3.3-5,.3Z\"\/&gt;\n&lt;path d=\"m220.7,234.3H70.3v20.6h.5c33.2,0,60.1,26.9,60.1,60.1s-26.9,60.2-60.1,60.2h-.5v39.6h150.4v-120.4h116.3v-60.1h-116.3Z\"\/&gt;\n\t&lt;circle cx=\"601.1\" cy=\"317.7\" r=\"48.9\"\/&gt;\n\t&lt;circle cx=\"48.9\" cy=\"317.7\" r=\"48.9\"\/&gt;\n\t&lt;circle cx=\"327.4\" cy=\"48.9\" r=\"48.9\"\/&gt;\n\t&lt;circle cx=\"327.4\" cy=\"596.3\" r=\"48.9\"\/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p><strong>STYLED<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-cyan-bluish-gray-background-color has-background\"><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\n&lt;svg id=\"Layer_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 650 645.2\"&gt;\n&lt;path d=\"m387.3,69.6v2c0,33.2-26.9,60.1-60.1,60.1s-60.2-26.9-60.2-60.1c0-.7,0-1.3.1-2h-32.1v150.4h120.3v116.3h60.2V69.6h-28.2Z\" <strong>style=\"fill:#009<\/strong>;\"\/&gt;\n&lt;path d=\"m296.1,427.5v-116.3h-60.1v266.7h29.1v-.5c0-33.2,26.9-60.2,60.2-60.2s60.1,26.9,60.1,60.2v.5h31.1v-150.4h-120.4Z\" <strong>style=\"fill:red;<\/strong>\"\/&gt;\n&lt;path d=\"m575.6,376.1c-33.2,0-60.1-26.9-60.1-60.2s26.9-60.2,60.1-60.2c1.7,0,3.4.1,5,.2v-24.8h-150.4v120.3h-116.3v60.2h266.7v-35.8c-1.7.2-3.3.3-5,.3Z\" <strong>style=\"fill:#090<\/strong>;\"\/&gt;\n&lt;path d=\"m220.7,234.3H70.3v20.6h.5c33.2,0,60.1,26.9,60.1,60.1s-26.9,60.2-60.1,60.2h-.5v39.6h150.4v-120.4h116.3v-60.1h-116.3Z\" <strong>style=\"fill:#ff0;<\/strong>\"\/&gt;\n\t&lt;circle cx=\"601.1\" cy=\"317.7\" r=\"48.9\"\/&gt;\n\t&lt;circle cx=\"48.9\" cy=\"317.7\" r=\"48.9\"\/&gt;\n\t&lt;circle cx=\"327.4\" cy=\"48.9\" r=\"48.9\"\/&gt;\n\t&lt;circle cx=\"327.4\" cy=\"596.3\" r=\"48.9\"\/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p>DIRECT HTML INSERT<\/p>\n\n\n\n<div class=\"wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-c5119a53 wp-block-group-is-layout-flex\" style=\"padding-right:25%;padding-left:25%\">\n<svg id=\"Layer_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 650 645.2\"><path d=\"m387.3,69.6v2c0,33.2-26.9,60.1-60.1,60.1s-60.2-26.9-60.2-60.1c0-.7,0-1.3.1-2h-32.1v150.4h120.3v116.3h60.2V69.6h-28.2Z\" style=\"fill:#009;\"\/><path d=\"m296.1,427.5v-116.3h-60.1v266.7h29.1v-.5c0-33.2,26.9-60.2,60.2-60.2s60.1,26.9,60.1,60.2v.5h31.1v-150.4h-120.4Z\" style=\"fill:red;\"\/><path d=\"m575.6,376.1c-33.2,0-60.1-26.9-60.1-60.2s26.9-60.2,60.1-60.2c1.7,0,3.4.1,5,.2v-24.8h-150.4v120.3h-116.3v60.2h266.7v-35.8c-1.7.2-3.3.3-5,.3Z\" style=\"fill:#090;\"\/><path d=\"m220.7,234.3H70.3v20.6h.5c33.2,0,60.1,26.9,60.1,60.1s-26.9,60.2-60.1,60.2h-.5v39.6h150.4v-120.4h116.3v-60.1h-116.3Z\" style=\"fill:#ff0;\"\/><circle cx=\"601.1\" cy=\"317.7\" r=\"48.9\"\/><circle cx=\"48.9\" cy=\"317.7\" r=\"48.9\"\/><circle cx=\"327.4\" cy=\"48.9\" r=\"48.9\"\/><circle cx=\"327.4\" cy=\"596.3\" r=\"48.9\"\/><\/svg>\n<\/div>\n\n\n\n<p>SOURCE CODE OF RENDERED SVG<\/p>\n\n\n\n<pre class=\"wp-block-code has-cyan-bluish-gray-background-color has-background\"><code>&lt;div class=\"wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-6\">\n\n&lt;svg id=\"Layer_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 650 645.2\">\n&lt;path d=\"m387.3,69.6v2c0,33.2-26.9,60.1-60.1,60.1s-60.2-26.9-60.2-60.1c0-.7,0-1.3.1-2h-32.1v150.4h120.3v116.3h60.2V69.6h-28.2Z\" style=\"fill:#009;\"\/>\n&lt;path d=\"m296.1,427.5v-116.3h-60.1v266.7h29.1v-.5c0-33.2,26.9-60.2,60.2-60.2s60.1,26.9,60.1,60.2v.5h31.1v-150.4h-120.4Z\" style=\"fill:red;\"\/>\n&lt;path d=\"m575.6,376.1c-33.2,0-60.1-26.9-60.1-60.2s26.9-60.2,60.1-60.2c1.7,0,3.4.1,5,.2v-24.8h-150.4v120.3h-116.3v60.2h266.7v-35.8c-1.7.2-3.3.3-5,.3Z\" style=\"fill:#090;\"\/>\n&lt;path d=\"m220.7,234.3H70.3v20.6h.5c33.2,0,60.1,26.9,60.1,60.1s-26.9,60.2-60.1,60.2h-.5v39.6h150.4v-120.4h116.3v-60.1h-116.3Z\" style=\"fill:#ff0;\"\/>\n&lt;circle cx=\"601.1\" cy=\"317.7\" r=\"48.9\"\/>\n&lt;circle cx=\"48.9\" cy=\"317.7\" r=\"48.9\"\/>\n&lt;circle cx=\"327.4\" cy=\"48.9\" r=\"48.9\"\/>\n&lt;circle cx=\"327.4\" cy=\"596.3\" r=\"48.9\"\/>&lt;\/svg>\n\n&lt;\/div><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The .SVG format is the only image format that is expressed in readable code which is designed to be directly manipulated by CSS. Some syntax basics: UN-STYLED STYLED DIRECT HTML INSERT SOURCE CODE OF RENDERED SVG<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-84","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/pages\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":0,"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/pages\/84\/revisions"}],"wp:attachment":[{"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/media?parent=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}