SVG Files

SVG files are the best way to display simple icons, background, etc. There file size is fairly small and the main advantage is they are scalable which makes them great for responsive workflows. SVG’s can be written out in html or added to gutenberg. Before we begin let’s take note that SVG’s do not use the color property. Instead they use fill, if an icon is filled in, and stroke, if an icon is mostly line work.

Adding an SVG in GenerateBlocks

GenerateBlocks supports the ability to add svg html to most of their blocks. This can be done on a case by case or you can go to asset library and add the html there so you can use it in multiple places. But first let’s compress and clean up the SVG. To do this visit the first button. We will talk about the 2nd button in a minute. Once the site has done the cleanup it will download the new SVG. You can open this in any sort of code editor to copy the raw html to use.

SVG Compression/Cleanup Tool SVG Strokes to Fill Tool

The site will reduce the size of it a little bit, however you can notice that in this example below we have inline styles. We can remove this inline styles, however if you look carefully you can see this icon only has a stroke, with no fill. GenerateBlocks will only allow us to use the Gutenberg interface color selector if it is a fill.

If we want variable colors

Remove all the css, but this will result in the icon looking weird in gutenberg. We can then add a few css classes and manually set it for each icon. IE a class of “.stroke-blue” or “.stroke-grey” this method would be ideal if we plan to use many stroke icons and want them to have similar colors.
Update the inline css each time you want to change the color. This method is the quickest way but limits reusability and ways to have the icon more global/easy to update. We can limit the pain by making sure to use css variables. IE “stroke: var(–accent)” This way we just update the accent color to update it all over the site.
Convert the Stroke to a Fill. If we use the link above this will covert the SVG to a fill and allow us to use the gutenberg interface to change the color on the fly. However this comes at the cost of file size. It will double the size, all while it is still a fairly small file, it is something to keep in mind.

Example SVG HTML with stroke only and inline styling for color

<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" data-name="Layer 2" viewBox="0 0 243.26 229.85">
  <defs>
    <style>
      .cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:6px}
    </style>
  </defs>
  <g id="_ÎÓÈ_2" data-name="—ÎÓÈ_2">
    <path d="M126.74 80.02v5.65c0 21.48-17.15 38.91-38.3 38.91s-38.31-17.42-38.31-38.91v-5.65m123.75 146.83-3.8-54.58c0-10.76-7.37-20.12-17.82-22.65h0c-9.23-2.23-23.54-8.8-32.05-12.93a8.652 8.652 0 0 0-8.6.61l-17.69 11.93a9.798 9.798 0 0 1-10.95 0L65.28 137.3a8.627 8.627 0 0 0-8.6-.61c-8.51 4.13-22.82 10.7-32.05 12.93h0c-10.46 2.53-17.82 11.89-17.82 22.65l-3.8 54.58M79.94 35.46 76.76 7.3c0-2.38 2.34-4.31 5.23-4.31h11c2.89 0 5.23 1.93 5.23 4.31l-3.18 28.16m13.45-22.32c13.31 7.95 22.31 23.21 22.31 40.72M66.46 13.14c-13.31 7.95-22.31 23.2-22.31 40.72m56.88-1.89c8.16 1.56 16.45 2.35 24.76 2.35h3.91c3.85 0 6.96 3.12 6.96 6.96h0c0 3.85-3.12 6.96-6.96 6.96H45.29c-3.85 0-6.96-3.12-6.96-6.96h0c0-3.85 3.12-6.96 6.96-6.96h3.41c8.63 0 17.25-.82 25.72-2.44l1.04-.2c7.94-1.52 16.1-1.52 24.05 0l1.52.29Zm44.45 95.59v79.29" class="cls-1"/>
    <path d="M53.16 138.37v31.47c0 6.35 5.14 11.49 11.49 11.49h47.55c6.35 0 11.49-5.14 11.49-11.49v-31.48m-92.26 88.49v-79.3M141.79 46.22c9.67-5.61 20.9-8.82 32.88-8.82 36.23 0 65.59 29.37 65.59 65.59 0 32.24-23.26 59.04-53.91 64.55" class="cls-1"/>
    <path d="m157.65 62.04 32.7-.08-9.58 27.03h24.11l-37.26 57.69v-36.41h-16.64l6.67-48.23z" class="cls-1"/>
  </g>
</svg>

Usings SVG’s in backgrounds – GenerateBlocks

In order to use an svg for a background we will either need to upload it to the media library if the site supports that, convert it to a usable format. The pro of the media library is it is fast, however, it will not allow us to change the color. Keep this in mind before uploading.

If you want more SVG’s for patterns and such this site has great ones! https://www.visiwig.com/patterns/

Convert to CSS via https://www.svgbackgrounds.com/tools/svg-to-css/

SVG format can’t just be used in background unless it’s uploaded to the media library. As mentioned we can do this but if we want to be able to adjust the color as well we will want to convert the SVG to a format that GenerateBlocks can read. As with the above section this will need to be a fill not a stroke icon/pattern. If you used the stroke to fill tool mentioned above this will have removed any color inline styles. Otherwise do ensure that the code does not mention stroke or fill before converting.

Once you have the html code for the svg paste it in the left column and then copy the right column. If we are using it in a css file it’s ready to use! Otherwise though if we use it in GenerateBlocks we need to to stripe the “url” and the ending “)” as generatepress will auto add it.

url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" data-name="Layer 2" viewBox="0 0 243.26 229.85"><defs></defs><g id="_ÎÓÈ_2" data-name="—ÎÓÈ_2"><path d="M126.74 80.02v5.65c0 21.48-17.15 38.91-38.3 38.91s-38.31-17.42-38.31-38.91v-5.65m123.75 146.83-3.8-54.58c0-10.76-7.37-20.12-17.82-22.65h0c-9.23-2.23-23.54-8.8-32.05-12.93a8.652 8.652 0 0 0-8.6.61l-17.69 11.93a9.798 9.798 0 0 1-10.95 0L65.28 137.3a8.627 8.627 0 0 0-8.6-.61c-8.51 4.13-22.82 10.7-32.05 12.93h0c-10.46 2.53-17.82 11.89-17.82 22.65l-3.8 54.58M79.94 35.46 76.76 7.3c0-2.38 2.34-4.31 5.23-4.31h11c2.89 0 5.23 1.93 5.23 4.31l-3.18 28.16m13.45-22.32c13.31 7.95 22.31 23.21 22.31 40.72M66.46 13.14c-13.31 7.95-22.31 23.2-22.31 40.72m56.88-1.89c8.16 1.56 16.45 2.35 24.76 2.35h3.91c3.85 0 6.96 3.12 6.96 6.96h0c0 3.85-3.12 6.96-6.96 6.96H45.29c-3.85 0-6.96-3.12-6.96-6.96h0c0-3.85 3.12-6.96 6.96-6.96h3.41c8.63 0 17.25-.82 25.72-2.44l1.04-.2c7.94-1.52 16.1-1.52 24.05 0l1.52.29Zm44.45 95.59v79.29" class="cls-1"/><path d="M53.16 138.37v31.47c0 6.35 5.14 11.49 11.49 11.49h47.55c6.35 0 11.49-5.14 11.49-11.49v-31.48m-92.26 88.49v-79.3M141.79 46.22c9.67-5.61 20.9-8.82 32.88-8.82 36.23 0 65.59 29.37 65.59 65.59 0 32.24-23.26 59.04-53.91 64.55" class="cls-1"/><path d="m157.65 62.04 32.7-.08-9.58 27.03h24.11l-37.26 57.69v-36.41h-16.64l6.67-48.23z" class="cls-1"/></g></svg>')

/*Will need to be for GenerateBlocks*/

'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_2" data-name="Layer 2" viewBox="0 0 243.26 229.85"><defs></defs><g id="_ÎÓÈ_2" data-name="—ÎÓÈ_2"><path d="M126.74 80.02v5.65c0 21.48-17.15 38.91-38.3 38.91s-38.31-17.42-38.31-38.91v-5.65m123.75 146.83-3.8-54.58c0-10.76-7.37-20.12-17.82-22.65h0c-9.23-2.23-23.54-8.8-32.05-12.93a8.652 8.652 0 0 0-8.6.61l-17.69 11.93a9.798 9.798 0 0 1-10.95 0L65.28 137.3a8.627 8.627 0 0 0-8.6-.61c-8.51 4.13-22.82 10.7-32.05 12.93h0c-10.46 2.53-17.82 11.89-17.82 22.65l-3.8 54.58M79.94 35.46 76.76 7.3c0-2.38 2.34-4.31 5.23-4.31h11c2.89 0 5.23 1.93 5.23 4.31l-3.18 28.16m13.45-22.32c13.31 7.95 22.31 23.21 22.31 40.72M66.46 13.14c-13.31 7.95-22.31 23.2-22.31 40.72m56.88-1.89c8.16 1.56 16.45 2.35 24.76 2.35h3.91c3.85 0 6.96 3.12 6.96 6.96h0c0 3.85-3.12 6.96-6.96 6.96H45.29c-3.85 0-6.96-3.12-6.96-6.96h0c0-3.85 3.12-6.96 6.96-6.96h3.41c8.63 0 17.25-.82 25.72-2.44l1.04-.2c7.94-1.52 16.1-1.52 24.05 0l1.52.29Zm44.45 95.59v79.29" class="cls-1"/><path d="M53.16 138.37v31.47c0 6.35 5.14 11.49 11.49 11.49h47.55c6.35 0 11.49-5.14 11.49-11.49v-31.48m-92.26 88.49v-79.3M141.79 46.22c9.67-5.61 20.9-8.82 32.88-8.82 36.23 0 65.59 29.37 65.59 65.59 0 32.24-23.26 59.04-53.91 64.55" class="cls-1"/><path d="m157.65 62.04 32.7-.08-9.58 27.03h24.11l-37.26 57.69v-36.41h-16.64l6.67-48.23z" class="cls-1"/></g></svg>'

Using the GenerateBlocks Asset Library

This method requires some tweaks to the css file on the site. If the site is using AmpedPress you will see the code working on the back and frontend. If not it may only show on the frontend depending on how the css is added. It will also need additional classes to position the shape. This method while easier in theory is more setup and will be used on a case by case basis.

Adding an SVG via HTML/CSS

SVG’s can be added to any site using html. This is is done like any other img tag. The one thing to look out for is any sort of inline CSS that controls either the fill or stroke. You can either set new colors inline or use a css class.