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
currentColor to use the current text color in the image.
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
<svg> elements: image control on
<img> lets us use normal images and inline SVGs. The same is true for editable
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 image upload is disabled by WordPress by default, because of security risks associated with SVG images.
<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.