add inline SVG image into block editor

You can place inline SVG into a Custom HTML block.

@bcworkz

Hi, Thank you for your reply and help
Yes, But there isn’t any way to resize the image and change the color
But we can do such things when we add SVG file as non inline

• This reply was modified 1 year, 11 months ago by Mahrokh.

An external file referenced from an img tag is managed differently by a browser than an inline svg tag. You can manage a svg tag’s size by either altering its width and height attributes, or applying CSS transform: scale() to it.

AFAIK the only way to change the color is to alter the inline code’s fill properties.

@bcworkz

Thank you , That resolved my problem ??

In fact if the image is loaded via your template or function, with file_get_contents() function, the svg code will be added to your pages rendered HTML. Then you will be able to resize or color it with regular css properties :

.my_inline_image_wrapper svg * {
fill : red
}

Using it with ACF fields can make this image editable / reusable, etc.