SVG transparent background web

WebSvgBackground

Web Problem Overview


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>

Web Solutions


Solution 1 - Web

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".

Solution 2 - Web

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" />

Solution 3 - Web

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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGildas.TamboView Question on Stackoverflow
Solution 1 - WebRobert LongsonView Answer on Stackoverflow
Solution 2 - WebFerasView Answer on Stackoverflow
Solution 3 - WebDaniel DanieleckiView Answer on Stackoverflow