Insert SVG code (not img) in HTML block

admin管理员组

文章数量:1122846

I want to insert svg code in a Guttenberg HTML block. I don't want it as an image because I want to manipulate it with CSS. If I insert svg, all tag diseappears and I have only the text which was inside svg tags. Thanks.

I want to insert svg code in a Guttenberg HTML block. I don't want it as an image because I want to manipulate it with CSS. If I insert svg, all tag diseappears and I have only the text which was inside svg tags. Thanks.

• block-editor
• svg

Share Improve this question asked Oct 18, 2019 at 8:07 AlyskoAlysko 13633 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

I tried this code on a clean install of WordPress

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

and used 'Custom HTML' in Guttenberg in a new post. This worked fine for me.

The same code displayed in the DOM without deleting any tags or adding any

Maybe you cant edit the SVG with HTML because WordpPress doesn't generate the code until the page is called.

0

What you want to do, is use the wordpress gutenberg own SVG Component

import { G, Path, SVG, Rect, Polygon } from '@wordpress/components';
<svg strokeLinecap={ "round" }/>

本文标签： Insert SVG code (not img) in HTML block