using SVG files in WordPress

SVG CODE

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:

  • “d” = attribute defines the path to be drawn
  • the default value for stroke = none
  • the default value for fill = #000 (black)
  • recognized shapes: rectangle <rect> ; circle <circle>; ellipse <ellipse>; line<line>; polyline <polyline>; path <path>
  • for a deeper dive go here

UN-STYLED

<?xml version="1.0" encoding="UTF-8"?>
<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"/>
<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"/>
<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"/>
<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"/>
	<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>

STYLED

<?xml version="1.0" encoding="UTF-8"?>
<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>

DIRECT HTML INSERT

SOURCE CODE OF RENDERED SVG

<div class="wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-6">

<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>

</div>