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.

SVGR exception with CDATA inside <style/> tag

See original GitHub issue

Hello!

My application to design SVG uses CDATA inside the <style/> section. All tested browsers open this SVG without issues:

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="960px" height="560px" version="1.1" viewBox="0 0 960 560">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fnt0 {font-weight:normal;font-size:39px;font-family:'Arial'}
   ]]>
  </style>
 </defs>
 <g id="XO">
  <metadata id="Layer"/>
  <text x="751" y="104" id="Temp" class="fnt0">25.0°C</text>
 </g>
</svg>

But SVGR fails to convert the SVG if i disable SVGO:

PS src\application\components> npx  @svgr/cli --icon --no-svgo -d .\ .\svg\cdata.svg
node_modules\@svgr\cli\lib\index.js:162
    throw error;
    ^
Error: Expected node, got `
    .fnt0 {font-weight:normal;font-size:39px;font-family:'Arial'}
   `
    at one (node_modules\@svgr\cli\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:12:11)
    at all (node_modules\@svgr\cli\node_modules\@svgr\hast-util-to-babel-ast\lib\all.js:20:37)
    at element (node_modules\@svgr\cli\node_modules\@svgr\hast-util-to-babel-ast\lib\handlers.js:51:37)
    at one (node_modules\@svgr\cli\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:19:10)
    at all (node_modules\@svgr\cli\node_modules\@svgr\hast-util-to-babel-ast\lib\all.js:20:37)
    at element (node_modules\@svgr\cli\node_modules\@svgr\hast-util-to-babel-ast\lib\handlers.js:51:37)
    at one (node_modules\@svgr\cli\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:19:10)
    at all (node_modules\@svgr\cli\node_modules\@svgr\hast-util-to-babel-ast\lib\all.js:20:37)
    at element (node_modules\@svgr\cli\node_modules\@svgr\hast-util-to-babel-ast\lib\handlers.js:51:37)
    at one (node_modules\@svgr\cli\node_modules\@svgr\hast-util-to-babel-ast\lib\one.js:19:10)
PS src\application\components>

So maybe SVGO parses the CDATA section without issues but if SVGR parses the SVG directly it fails. If i simply remove <![CDATA[`` and ]]` SVGO and SVGR have no issues.

Issue Analytics

State:
Created 2 years ago
Reactions:8
Comments:9 (1 by maintainers)

Top GitHub Comments

9reactions

stale[bot]commented, Jul 25, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

7reactions

ginnymincommented, Jan 8, 2022

Is it possible for this issue to be looked into? Ran into this when upgrading to CRA5

Top Results From Across the Web

Is CDATA necessary when styling an inline SVG?

In theory CDATA blocks are required anywhere you'd want to write unescaped text. In XML, only 2 characters need escaping: < and &...

Styling – SVG 1.1 (Second Edition) - W3C

CSS style sheets defined within a 'style' element can be immediate character data content of the 'style' element or can be embedded within...

where to put css code : svg cdata style (inline) and html style ...

IF i use SVG and define css code inside svg using <svg ><style type="text/css" > <![CDATA[ circle ... I use definition css code...

how to get xsl:copy-of to appear within CDATA - SSDN

RuntimeException : Er... (2) ... xsl report, with xml feed, SVG... (7) ... Marge node using attribute val... (1).

A Roadmap to XML Parsers in Python - Real Python

[CDATA[ console.log("CDATA disables XML parsing: <svg>") const smiley ... and closing tags of elements using .findtext() or get the inner text of the...