Home/ Documentation/ WordPress/ Blocks/ Inline SVG Images

Inline SVG Images

Blocks created with Pinegrow come with a powerful support for using inline SVG images.

Note, for security reasons, inline SVG features are disabled. To activate them, allow the Inline SVG support in Theme / Plugin Settings (see details below).

Inline SVG images use the <svg> element to include the image directly to the HTML code, without linking the image from the external file. The benefit is that we can style inline SVGs with CSS and set fill or stroke to currentColor to use the current text color in the image.

Image controls

Block attributes with Use as Image display a Image selector control in the block editor sidebar.

The image control lets us pick an image from the Media library – or paste the code of an inline SVG image:

This works with both <img> and <svg> elements: image control on <img> lets us use normal images and inline SVGs. The same is true for editable <svg> elements.

The code generated by Pinegrow doesn’t just replace the <img> with a <svg> or vice versa. Instead, it also merges their attributes so that the styling, classes, id, data-* and aria-* attributes of the target element are preserved on the inserted image.

Editable SVG content

Block attributes used as Content on inline SVG elements are handled a bit differently than regular content attributes.

Regular content attributes make the inner content of their element editable.

Content attributes on inline SVG elements merge the value of the attribute with the target SVG element:

  • Style, class, id, aria-* and data-* attributes of the original SVG element are preserved
  • The rest of the SVG element (other attributes and content) is replaced by the SVG stored in the attribute value.

This makes it possible to create editable attributes on inline SVG elements that let user customize the SVG image.

SVG security

SVG image upload is disabled by WordPress by default, because of security risks associated with SVG images.

SVG images can contain JavaScript code and if used as-it-is they can let users who are allowed to upload images insert custom JavaScript code to the page.

Pinegrow adds the code that removes JavaScript code from inline SVG images that are used as Block attributes. All <script> elements and on* attributes are removed.

Still, as a precaution, inline SVG images are disabled and have to be first enabled in the Blocks section on Theme / Plugin Settings.

If you are using inline SVG images, your site should be set-up in such a way that non-trusted users are not able to use the Block editor.

Last updated on December 5, 2021 at 1:22 am

Print this article