69

I am trying to change the background of this SVG code to transparent without success. I'm new to SVG and somehow I can't find the solution on google; can anybody help?

demo:http://jsfiddle.net/kougiland/SzfSJ/1/

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px" viewBox="0 0 300 100">
  <rect x="0" y="0" width="300" height="100" stroke="transparent" stroke-width="1" />
  <circle cx="0" cy="50" r="15" fill="blue" stroke="transparent" stroke-width="1">
    <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
  </circle>

  <circle id="rotatingBall" cx="0" cy="50" r="15" fill="green" stroke="transparent" stroke-width="1" opacity="0.8"></circle>
  <animateTransform xlink:href="#rotatingBall" attributeName="transform" begin="0s" dur="2s" type="rotate" from="0 20 20" to="360 100 60" repeatCount="indefinite" />
</svg>
General Grievance
  • 4,555
  • 31
  • 31
  • 45
Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78

3 Answers3

93

transparent is not part of the SVG specification, although many UAs such as Firefox do support it anyway. The SVG way would be to set the stroke to none, or alternatively set the stroke-opacity to 0.

You also don't set any value for fill on the <rect> element and the default is black. For a transparent rect you want to add fill="none".

isherwood
  • 58,414
  • 16
  • 114
  • 157
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • 2
    This answer is outdated. Current versions of the SVG spec has [adopted](https://www.w3.org/TR/css3-values/#colors) the `transparent` keyword from the [CSS3 spec](https://www.w3.org/TR/css-color-3/#transparent). – mindplay.dk Feb 12 '20 at 07:30
  • 1
    There's still no good reason to use transparent in SVG. All of the alternatives in my answer would result in faster rendering. – Robert Longson Feb 12 '20 at 07:52
  • why would `none`, which is not a valid keyword according to the spec, result in faster rendering than `transparent`? Have you actually benchmarked this, or what makes you think `transparent` fill/stroke would be implemented any differently than `none`? – mindplay.dk Feb 14 '20 at 18:39
  • 42
    @mindplay.dk [none is a valid keyword](https://www.w3.org/TR/SVG11/single-page.html#painting-SpecifyingPaint). I didn't benchmark it, **I implemented it**. Have you seen my [profile](https://stackoverflow.com/users/1038015/robert-longson?tab=profile)? – Robert Longson Feb 14 '20 at 21:36
  • Curious - we can also use transparent HEX code like `#ffffff00` or `#ffffff30`. Would your answer still provide faster rendering compared to adding above HEX code? – Gangula Oct 31 '21 at 12:26
  • @Gangula : yes. – Yann Dìnendal Nov 24 '22 at 18:02
9

Inside rectangle you can use fill-opacity="0.5" 

<rect x="0" y="0" width="300" height="100" stroke="transparent" stroke-width="1" fill="green" fill-opacity="0.5" />
0xFK
  • 2,433
  • 32
  • 24
  • It works only to have transparency. To have a fully transparent background you must use the @Robert Longson's solution. – Joel Carneiro Jul 25 '19 at 10:39
1

Let say you have a background with certain color, e.g. #231f20 and you really want to get rid of this. For example, name of your company/slogan is in white, i.e. #ffffff.

You background should be in a similar format to this, simply remove the line from .svg file:

<path id="path12" style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 H 2048 V 350 H 0 Z" />

Leaving other paths untouched, which would draft the white color in this particular example. One of these could look like that one below:

<g transform="translate(87.6235,66.3594)" id="g22">
  <path id="path24" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 h 16.497 c 36.293,0 59.458,19.135 67.356,64.009 8.71,49.49 -5.134,62.688 -46.707,62.688 H 22.299 Z m -87.624,-55.432 41.812,237.559 H 58.451 c 76.546,0 117.787,-35.633 104.023,-113.83 C 146.737,-21.117 90.875,-55.432 14.659,-55.432 Z" />
</g>
Daniel Danielecki
  • 8,508
  • 6
  • 68
  • 94
  • I am checking my file for fill=" and there are many entries. What would I change to make the image transparent? – Mark Jul 21 '21 at 11:57
  • @Mark it's difficult to guess without some kind of code snippet/sandbox preferably – Daniel Danielecki Jul 24 '21 at 10:37
  • I'm also faced the issue but in my case problem was when mouse over on button( which contains the svg), doesn't change the color of svg. So I just replace the all text "fill: rgb(255,255,255);" with "fill: currentColor;" in the style (inside the svg element) and it worked and then finally got change of color on mouse over. Thanks. I came for the solution here with question how to make my svg transparent but after reading the all conversation, I got the hint. – ncs ncs Aug 11 '23 at 09:57