Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

BUG: SVG Not rendering when inside any HTML Element

See original GitHub issue

GrapesJS version

I confirm to use the latest version of GrapesJS

What browser are you using?

Version 94.0.4606.81 (Official Build) (64-bit)

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

How to reproduce the bug?

Add any SVG directly it will be visible in the canvas - then wrap the same SVG element inside DIV / SECTION / UL / LI

once it’s wrapped it is not visible in canvas.

What is the expected behavior? SVG elements must be visible in the canvas

What is the current behavior? SVG elements not rendering - when wrapped inside HTML Blocks DIV/ SECTION/ …

Insert the following code using Custom Code block in the GrapesJs

<div id="i5cde" class="icon-rounded text-white mb-4 bg-dark">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="40px" height="40px">
    <path d="M13 12h7v1.5h-7m0-4h7V11h-7m0 3.5h7V16h-7m8-12H3c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 15h-9V6h9">
    </path>
  </svg>
</div>
<h3 id="ixw0n">Web App Prototypes
  <br draggable="true" data-highlightable="1" id="i3k5o">
</h3>
<p id="ijtagh" class="mb-0 text-secondary">Prototype UX/UI and get battle-tested markups, ready for your next web project.
</p>

Code of Conduct

I agree to follow this project’s Code of Conduct

Issue Analytics

State:
Created 2 years ago
Comments:11 (3 by maintainers)

Top GitHub Comments

1reaction

marcosvnmelocommented, Nov 18, 2021

I’m sorry I just spelled it wrong. I meant 0.17.29.

1reaction

marcosvnmelocommented, Nov 4, 2021

I keep having this problem in version 0.17.19

Top Results From Across the Web

HTML SVG Elements not rendering properly: - Stack Overflow

This seems to be drawing all the shapes perfectly (12 of them). I am not sure if it's a good solution or not?...

HTML SVG Graphics - W3Schools

The HTML <svg> element is a container for SVG graphics. ... Resolution dependent; No support for event handlers; Poor text rendering capabilities ......

Ext element - SVG

Tree construction recovers from errors by closing the <svg> element, and not rendering any content after the error. What are you considering an...

Rendering Bug with SVG Filters in nested SVG Files - Monorail

Steps to reproduce the problem: 1. This Bug requires, that "GPU compositing on all pages" not be turned off. 2. A nested SVG...

Templates - Lit.dev

The svg tag function should only be used for SVG fragments, or elements that would be contained inside an <svg> HTML element. A...