Svg Transparent Background Web
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...
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:
<svg xmlns="" 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>3 Answers
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".
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" />
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>
Marcus Vance is a cybersecurity auditor and technology writer dedicated to educating the public about online safety, data privacy regulations, enterprise security, and emerging cyber threats.
