CODEWITHSUNDEEP
htmlsvg
guettli
guettli

Reputation: 27806

HTML inside SVG

I would like to add some HTML markup in an SVG drawing.

html-in-svg

As far as I know, this is not possible with SVG.

The image gets displayed in the browser.

Is there a way to paint the HTML above the SVG?

Since I want to use the CSS/table features of HTML the SVG <text> element is not enough.

Upvotes: 9

Views: 6017

Answers (4)

Ood
Ood

Reputation: 1795

There you go!

.wrapper{
    position: relative;
    width: 100px;
    height: 100px;
}
.text{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    color: white;
}
<html>
<body>

<div class="wrapper">
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="blue" />
</svg>
<div class="text">
TEXT
</div>
</div>

</body>
</html>

Upvotes: 4

user11984600
user11984600

Reputation:

Everything you have to do is give the svg position: absolute and then you can place markup on top of it. I don't know if there is any way to do it within the svg tag, if that was what you wanted.

Upvotes: 1

guettli
guettli

Reputation: 27806

User @enxaneta pointed me to foreignObject.

It works fine (even in webbrowser Edge).

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
div {
  color: white;
  font: 18px serif;
  height: 100%;
  overflow: auto;
}
  </style>
 
  <polygon points="5,5 195,10 185,185 10,195" />

  <!-- Common use case: embed HTML text into SVG -->
  <foreignObject x="20" y="20" width="160" height="160">
<!--
  In the context of SVG embedded in an HTML document, the XHTML 
  namespace could be omitted, but it is mandatory in the 
  context of an SVG document
-->
<div xmlns="http://www.w3.org/1999/xhtml">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
  porta vel dui convallis, rutrum imperdiet eros. Aliquam
  erat volutpat.
</div>
  </foreignObject>
</svg>

CodePen: https://codepen.io/guettli/pen/RwwBxQL

Upvotes: 18

Quangdao Nguyen
Quangdao Nguyen

Reputation: 1373

Since I want to use the css features of HTML the svg <text> element is not enough.

You can use CSS on <text>, or really any SVG element. The only major difference is that you have to use fill instead of color if you need to change the text color. Where that CSS would live would depend on how you plan on implementing the image on the site. If the SVG is embedded, ie via an <img> tag, the styles would have to be inlined into the SVG file itself, using a <defs> tag, as seen below.

<svg width="400" height="110">
<defs>
<style>
.my-custom-text {
fill: #fff;
font-weight: bold;
}
.cyan {
fill: #0ff;
}
</style>
</defs>
<g>
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
  <text x="15" y="25" class="my-custom-text">My custom <tspan class="cyan">text</tspan></text>
  </g>
</svg>

If you are inlining the SVG, then you can actually think of it as running as HTML -- it, and its child elements, are just normal HTML elements and can be targeted just like any other element. This means that the CSS can be put anywhere you would normally put it - as an external document or in any <style> tag.

And if all else fails, you can always just absolutely position the HTML content above the image in a separate container and style it that way.

Upvotes: 3

Related Questions