Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I display html encoded values in svg?

I am using d3 to generate svg and end up with markup similar to the following:

<text class="rule" text-anchor="middle">&amp;pound;10K</text>

Compare to similar html that renders as expected.

<div>
    &pound;20,160 - &pound;48,069
</div>

Is there a property I need to set on the svg tag to get a similar type of encoding? I tried adding a meta tag to the page <meta name="content" content="application/xhtml+xml; charset=utf-8" /> but this did not work.

like image 384
Joe Cartano Avatar asked Aug 27 '13 18:08

Joe Cartano


People also ask

How do I link SVG to HTML?

SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document. If you did everything correctly, your webpage should look exactly like the demo below.

What is SVG HTML element?

The svg element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document. Note: The xmlns attribute is only required on the outermost svg element of SVG documents.

What is SVG in HTML 5?

SVG stands for Scalable Vector Graphics. SVG is used to define graphics for the Web.

What is SVG tag?

The <svg> tag defines a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images. To learn more about SVG, please read our SVG Tutorial.


1 Answers

HTML entities are not defined in SVG. You can either use the actual unicode character or use the foreignObject element to embed HTML into your SVG.

like image 186
Lars Kotthoff Avatar answered Sep 20 '22 00:09

Lars Kotthoff