Background color of text in SVG

Question

I want to color the background of svg text similar to background-color in css

I was only able to find documentation on fill, which colors the text itself

Is it even possible?

These also might help http://stackoverflow.com/questions/6725288/svg-text-inside-rect and http://stackoverflow.com/questions/8675223/background-color-of-tspan-element — gotohales, Mar 19 '13 at 13:38
http://stackoverflow.com/questions/12260370/draw-text-in-svg-but-remove-background/12263962#12263962 also shows how to do this using filters. — Erik Dahlström, Mar 19 '13 at 15:44
@RobertLongson Closing this question as duplicate when it was asked 2 years prior to the other one seems wrong, especially when the only answer there is yours. — Preview, Dec 06 '16 at 18:29
@Aperçu: The age of a question is not the main factor when choosing a duplicate target, see for example [here](http://meta.stackoverflow.com/q/315472/2675154). — honk, Dec 06 '16 at 20:04
@RobertLongson would you say this question is not of comparable (if not better) quality to the other one even though it has 42 upvotes against 8? Your answer also as the same score as the lower of these two, and less than a third of the top one. The quality of your answer is rather subjective to you and shouldn't really matter. — Preview, Dec 06 '16 at 21:01

score 133 · Answer 1 · edited Jan 07 '21 at 15:24

133

You could use a filter to generate the background.

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow" result="bg" />
      <feMerge>
        <feMergeNode in="bg"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
</svg>

edited Jan 07 '21 at 15:24

CasperX

13
4

answered Jun 23 '15 at 21:03

Robert Longson

118,664
26
252
242

2

What does "SourceGraphic" mean here? Does "url(#solid)" actually cause an extra web access? – Ben Slade Nov 25 '15 at 19:28
1

No, it shouldn’t. It’s referring to the definition of the in the tag, which is part of the svg (and hence not loaded again). – May 03 '16 at 18:28
10

text is blurry here :( – teran Jun 06 '16 at 15:10
12

Can yo give the background **padding**? – vsync Feb 19 '17 at 10:51
@vsync best aska separate question about that showing what you have so far. – Robert Longson Feb 19 '17 at 16:23
1

@RobertLongson - I've asked, [here it is](http://stackoverflow.com/q/42327183/104380) – vsync Feb 20 '17 at 11:06
4

Love this solution in theory, but can confirm that the text is blurry. It seems like the filter breaks anti-aliasing. – paulmelnikow Feb 22 '17 at 18:36
1

Me too, Love the solution, got the +1, but definitely breaks anti aliasing :( – Bill Apr 25 '17 at 13:50
6

Add `operator="xor"` to `feComposite` to prevent blurry text. @RobertLongson @teran @paulmelnikow @bill – Saeid Feb 15 '19 at 13:49
1

Is is possible to make borders rounded? – holden321 May 16 '19 at 15:25
Note: this doesn't work in Safari if you have a `` tag in your html. – Thomas Jan 20 '20 at 09:15

sluijs · Accepted Answer · 2015-11-14T16:20:42.540

120

No this is not possible, SVG elements do not have background-... presentation attributes.

To simulate this effect you could draw a rectangle behind the text attribute with fill="green" or something similar (filters). Using JavaScript you could do the following:

var ctx = document.getElementById("the-svg"),
textElm = ctx.getElementById("the-text"),
SVGRect = textElm.getBBox();

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    rect.setAttribute("x", SVGRect.x);
    rect.setAttribute("y", SVGRect.y);
    rect.setAttribute("width", SVGRect.width);
    rect.setAttribute("height", SVGRect.height);
    rect.setAttribute("fill", "yellow");
    ctx.insertBefore(rect, textElm);

edited Nov 14 '15 at 16:20

answered Jun 01 '13 at 13:14

sluijs

4,146
4
30
36

10

That or use an svg filter (feFlood + feComposite) on the text. See slightly similar question http://stackoverflow.com/questions/12260370/draw-text-in-svg-but-remove-background. – Erik Dahlström Jun 03 '13 at 15:06
3

This solution using getBBox(), although it works just fine, can be quite slow when a large number of calculations need to be done. The issue with using an svg filter (feFlood + feComposite) is that the text comes out a little jagged. Have offered a simple, but hacky solution below. – dbarton_uk Jan 27 '17 at 19:48
Better to use textElm = document.getElementById("the-text") instead of textElm = ctx.getElementById("the-text")? – Simon Hi Sep 05 '19 at 18:41
How cal I use the same getBBox function in nodeJS – Ali Apr 23 '20 at 14:03

score 40 · Answer 3 · edited Nov 10 '20 at 11:25

40

The solution I have used is:

<svg>
  <line x1="100" y1="100" x2="500" y2="100" style="stroke:black; stroke-width: 2"/>    
  <text x="150" y="105" style="stroke:white; stroke-width:0.6em">Hello World!</text>
  <text x="150" y="105" style="fill:black">Hello World!</text>  
</svg>

A duplicate text item is being placed, with stroke and stroke-width attributes. The stroke should match the background colour, and the stroke-width should be just big enough to create a "splodge" on which to write the actual text.

A bit of a hack and there are potential issues, but works for me!

edited Nov 10 '20 at 11:25

Ali Almohsen

1,311
3
13
24

answered Jan 27 '17 at 19:58

dbarton_uk

980
11
17

1

Also prints nicely where as the filter solution was very blurry when printed. – David Hunt Mar 15 '19 at 22:19
Love it.. it looks awesome when you adjust stroke width a little. – Waldemar Jan 04 '23 at 15:19

score 25 · Answer 4 · answered Jan 10 '18 at 18:58

25

Instead of using a <text> tag, the <foreignObject> tag can be used, which allows for XHTML content with CSS.

answered Jan 10 '18 at 18:58

Chris G

431
1
7
8

1

Can you leave an example? – IgniteCoders Sep 26 '19 at 10:34
6

Underrated answer. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject Contains an useful example. Within your foreignObject you can use divs & spans together with css definitions. – dr jerry Mar 11 '20 at 09:04
1

Doesn't work in Safari if you want to apply a CSS transformation to a DIV inside a foreignObject within an SVG. – Kernel James Jul 28 '22 at 14:02
`foreignObject` is a hack to the SVG world and not all browsers fully support it as @KernelJames mentioned. – Maciej Bukowski Jan 04 '23 at 23:08

score 18 · Answer 5 · answered Jun 24 '14 at 04:48

18

No, you can not add background color to SVG elements. You can do it programmatically with d3.

var text = d3.select("text");
var bbox = text.node().getBBox();
var padding = 2;
var rect = self.svg.insert("rect", "text")
    .attr("x", bbox.x - padding)
    .attr("y", bbox.y - padding)
    .attr("width", bbox.width + (padding*2))
    .attr("height", bbox.height + (padding*2))
    .style("fill", "red");

answered Jun 24 '14 at 04:48

nnattawat

686
5
11

4

This does not work; it only changes the color of the text, not the background color. – David J. Sep 10 '14 at 21:17
1

Enclose the **text** in a **div** or **span** and apply styling to whichever of the last two you have used. – Arif Burhan Mar 31 '16 at 01:22
This post explains it well: https://cambridge-intelligence.com/customize-graph-visualization-d3-keylines/ – exchange Aug 16 '20 at 12:43

score 8 · Answer 6 · edited Jan 26 '23 at 19:55

8

Answer by Robert Longson (@RobertLongson) with modifications:

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic" operator="xor"/>
    </filter>
  </defs>
  <text filter="url(#solid)" x="20" y="50" font-size="50"> solid background </text>
  <text x="20" y="50" font-size="50">solid background</text>
</svg>

and we have no bluring and no heavy "getBBox" :) Padding is provided by white spaces in text-element with filter. It's worked for me

edited Jan 26 '23 at 19:55

Mulan

129,518
31
228
259

answered Mar 14 '17 at 10:24

Roman Belov

139
1
3

Concerning padding, you'd better use the parameters `x`, `y`, `width` and `height` of `filter`. The default values provide a nice padding (I mean, not the values of your answer, but the default SVG values which are taken if you do not define them). – FlorianT Feb 18 '22 at 09:55
Using the operator `"xor"` makes the text appear as transparent instead of the chosen color (if we except the more complex case of a flood-color with alpha). Don't you want to use operator `"over"` instead? – FlorianT Feb 18 '22 at 10:08
@FlorianT then why does the text have a color? and adding `fill="red"` on the text makes the text red? – theonlygusti Jun 20 '23 at 13:09

score 8 · Answer 7 · answered Feb 17 '22 at 15:16

8

Going further with @dbarton_uk answer, to avoid duplicating text you can use paint-order=stroke style:

<svg>
  <line x1="100" y1="100" x2="350" y2="100" style="stroke:grey; stroke-width: 100"/>    
  <text x="150" y="105" style="stroke:white; stroke-width:0.5em; fill:black; paint-order:stroke; stroke-linejoin:round">Hello World!</text>
</svg>

Note the stroke-linejoin:round which is needed to avoid seeing spikes for the W sharp angle.

answered Feb 17 '22 at 15:16

FlorianT

1,147
11
16

1

This is exactly what I wanted. Can be added to css without changing doc itself. – Tao Starbow Jan 28 '23 at 20:10

score 4 · Answer 8 · edited Jan 26 '23 at 19:55

For those wondering how to apply padding to a text element when it has a background like in the Robert's answer, do the following:

<svg>
  <defs>
    <filter x="-0.1" y="-0.1" width="1.2" height="1.2" id="solid">
      <feFlood flood-color="#171717"/>
      <feComposite in="SourceGraphic" operator="xor" />
    </filter>
  </defs>
  <text filter="url(#solid)" x="20" y="50" font-size="50">Hello</text>
</svg>

In the example above, filter's x and y positions can be used as transform: translate(-10%, -10%) would, and width and height values can be read as 120% and 120%. So we made background 20% bigger, and offsetted it -10%, so background is now 10% bigger on each side of the text.

score 3 · Answer 9 · answered Mar 12 '19 at 05:19

You can combine filter with the text.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>SVG colored patterns via mask</title>
  </head>
  <body>
    <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter x="0" y="0" width="1" height="1" id="bg-text">
          <feFlood flood-color="white"/>
          <feComposite in="SourceGraphic" operator="xor" />
        </filter>
      </defs>
   <!-- something has already existed -->
    <rect fill="red" x="150" y="20" width="100" height="50" />
    <circle cx="50"  cy="50" r="50" fill="blue"/>
      
      <!-- Text render here -->
      <text filter="url(#bg-text)" fill="black" x="20" y="50" font-size="30">text with color</text>
      <text fill="black" x="20" y="50" font-size="30">text with color</text>
    </svg>
  </body>
</html>

score 2 · Answer 10 · answered Sep 19 '17 at 20:10

this is my favorite hack (not sure it should work). It refer an element that is not yet displayed, and it works pretty well

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 620 40" preserveAspectRatio="xMidYMid meet">
    <defs>
        <filter x="-0.02" y="0" width="1.04" height="1.1" id="removebackground">
            <feFlood flood-color="#00ffff"/>
        </filter>
    </defs>

    <!--Draw the text--> 
    <use xlink:href="#mygroup" filter="url(#removebackground)" />
    <g id="mygroup">
        <text id="text1" x="9" y="20" style="text-anchor:start;font-size:14px;">custom text with background</text>  
        <line x1="200" y1="18" x2="200" y2="36" stroke="#000" stroke-width="5"/> 
        <line x1="120" y1="27" x2="203" y2="27" stroke="#000" stroke-width="5"/> 
    </g>
</svg>

score 1 · Answer 11 · edited Jan 26 '23 at 14:17

The previous answers relied on doubling up text and lacked sufficient whitespace.

By using atop and   I was able to get the results I wanted.

This example also includes arrows, a common use case for SVG text labels:

<svg viewBox="-105 -40 210 234">
<title>Size Guide</title>
<defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
        <feFlood flood-color="white"></feFlood>
        <feComposite in="SourceGraphic" operator="atop"></feComposite>
    </filter>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 0 0 L 10 5 L 0 10 z"></path>
    </marker>
</defs>
<g id="garment">
    <path id="right-body" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 0 l30 0 l0 154 l-30 0"></path>
    <path id="right-sleeve" d="M30 0 l35 0 l0 120 l-35 0" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></path>
    <use id="left-body" href="#right-body" transform="scale(-1,1)"></use>
    <use id="left-sleeve" href="#right-sleeve" transform="scale(-1,1)"></use>
    <path id="collar-right-top" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 -6.5 l11.75 0 l6.5 6.5"></path>
    <use id="collar-left-top" href="#collar-right-top" transform="scale(-1,1)"></use>
    <path id="collar-left" fill="white" stroke="black" stroke-width="1" stroke-linejoin="round" d="M-11.75 -6.5 l-6.5 6.5 l30 77 l6.5 -6.5 Z"></path>
    <path id="front-right" fill="white" stroke="black" stroke-width="1" d="M18.25 0 L30 0 l0 154 l-41.75 0 l0 -77 Z"></path>
    <line x1="0" y1="0" x2="0" y2="154" stroke="black" stroke-width="1" stroke-dasharray="1 3"></line>
    <use id="collar-right" href="#collar-left" transform="scale(-1,1)"></use>
</g>
<g id="dimension-labels">
    <g id="dimension-sleeve-length">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="85" y1="0" x2="85" y2="120" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="85" y="60" class="dimension" text-anchor="middle" dominant-baseline="middle"> 120 cm</text>
    </g>
    <g id="dimension-length">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-85" y1="0" x2="-85" y2="154" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="-85" y="77" text-anchor="middle" dominant-baseline="middle" class="dimension"> 154 cm</text>
    </g>
    <g id="dimension-sleeve-to-sleeve">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-65" y1="-20" x2="65" y2="-20" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="0" y="-20" text-anchor="middle" dominant-baseline="middle" class="dimension">&nbsp;130 cm&nbsp;</text>
    </g>
    <g title="Back Width" id="dimension-back-width">
        <line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-30" y1="174" x2="30" y2="174" stroke="black" stroke-width="1"></line>
        <text font-size="10" filter="url(#solid)" fill="black" x="0" y="174" text-anchor="middle" dominant-baseline="middle" class="dimension">&nbsp;60 cm&nbsp;</text>
    </g>
</g>
</svg>

The use ` ` instead of ` ` causes problems on many browsers as it doesn't validate as SVG. Also, one might want to add `xmlns="http://www.w3.org/2000/svg"` as an attribute to the svg tag to ensure the browser interprets this properly (e.g. this doesn't work on Firefox as-is). — Joseph Van Riper, Nov 23 '20 at 15:59

score 0 · Answer 12 · answered Nov 18 '22 at 09:34

An obvious workaround to the problem of the blur produced by the filter effect is to render the <text> two times: once for the background (with transparent characters) and once for the characters (without a background filter).

For me, this was the only way to make the text readable in Safari.

<svg width="100%" height="100%">
    <filter x="0" y="0" width="1" height="1" id="solid">
        <feFlood flood-color="yellow" />
    </filter>
    <g transform="translate(20, 50)" font-size="50">
        <text aria-hidden="true" fill="none" filter="url(#solid)">solid background</text>
        <text fill="blue">solid background</text>
    </g>
</svg>

The aria-hidden="true" attribute is there to prevent screen readers from speaking the text twice, if the user uses a screen reader.

score -1 · Answer 13 · answered Oct 01 '18 at 18:34

You can add style to your text:

  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    text-shadow: rgb(255, 255, 255) -2px -2px 0px, rgb(255, 255, 255) -2px 2px 0px, 
     rgb(255, 255, 255) 2px -2px 0px, rgb(255, 255, 255) 2px 2px 0px;"

White, in this example. Does not work in IE :)

Background color of text in SVG

13 Answers13

Linked

Related