So I have an SVG image which acts as a swirl effect and sits on top of the menu div tag my bottom menu of my website.
It previews fine in Dreamweaver but when I go to publish this, it doesn't show.
This is a simple copy and paste from Adobe illustrator and it's worked perfectly before, until tonight when I decided it not going to show in the web browser. I use Edge.
I expect the SVG image to show in the web browser, but it doesn't show.
Any ideas?
<svg id="bdff17f9-6220-4e90-95a0-392adfab69fd" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 835.69 184.37">
<defs>
<style>
.a1a6fb66-4b89-4bb7-b5cb-a0c76572bf56{fill:url(#b55c1108-0f51-4b65-83b4-456351451c95);}
</style>
<linearGradient id="b55c1108-0f51-4b65-83b4-456351451c95" x1="0.63" y1="259.63" x2="836.32" y2="259.63" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#22205f"/>
<stop offset="1" stop-color="#22205f"/></lineargradient>
</defs>
<title>two-layer-swirl</title>
<path class="a1a6fb66-4b89-4bb7-b5cb-a0c76572bf56" d="M836.32,225.39V351.81H.63V225.39C360.33,65.41,449,295,836.32,225.39Z" transform="translate(-0.63 -167.45)"/>
</svg>
Related
I have a problem with rendering SVG image, but only in Chrome (version 87). It did work in early version of Chrome, like version 86.
It does render as it should be in Firefox.
The URL of the SVG is:
https://svgshare.com/i/RuQ.svg
At Chrome, the sky-blue circle is not displayed,
While in Firefox it does.
Also, here's a simple HTML page with how I use the SVG.
<!DOCTYPE html>
<html>
<head> </head>
<body>
<img height="50px" width="50px" src="https://svgshare.com/i/RuQ.svg"></img>
</body>
</html>
Any ideas for what might be wrong in the SVG?
This SVG looks like it was produced by Adobe Illustrator. While Robert Longson is formally right that this is a Chrome bug, the blame goes fully to Adobe.
For documentation: this is what the program exported to SVG. I have already shortened the code by ca. 50% removing unused definitions:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43 43">
<defs>
<style>
.cls-3{fill:#040f21;}
.cls-4{mask:url(#mask-2);}
.cls-5{fill:url(#linear-gradient);}
.cls-7{filter:url(#luminosity-noclip-2);}
</style>
<filter id="luminosity-noclip-2" x="2.36" y="-16315" width="39.63" height="32766" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-color="#fff" result="bg"/>
<feBlend in="SourceGraphic" in2="bg"/>
</filter>
<mask id="mask-2" x="2.36" y="-16315" width="39.63" height="32766" maskUnits="userSpaceOnUse">
<g class="cls-7"/>
</mask>
<linearGradient id="linear-gradient" x1="22.17" y1="60.87" x2="22.17" y2="-17.54" gradientUnits="userSpaceOnUse">
<stop offset="0.21" stop-color="#3f97f5"/>
<stop offset="0.83" stop-color="#3fa9f5"/>
</linearGradient>
</defs>
<title>Dlogo</title>
<g id="Layer_1" data-name="Layer 1">
<path class="cls-3" d="M28.43,31.83a23.24,23.24,0,0,1-5.41.78c-6.12,0-8.86-2.07-8.86-11.48S17.44,9.44,23.34,9.44a18.52,18.52,0,0,1,5.09.71l-.51,3.28a16.24,16.24,0,0,0-4.22-.61c-3.62,0-5.16,1.13-5.16,8.18S20,29.22,23.7,29.22a15.69,15.69,0,0,0,4.22-.67Z"/>
<g class="cls-4">
<path class="cls-5" d="M22.17,41.31A19.81,19.81,0,1,1,42,21.5,19.83,19.83,0,0,1,22.17,41.31Zm0-35.21a15.4,15.4,0,1,0,15.4,15.4A15.41,15.41,0,0,0,22.17,6.1Z"/>
</g>
</g>
</svg>
The second path is the only member of a group .cls-5, which is masked with #mask-2.
This luminosity mask contains an empty group, making the mask by default hiding all content that is masked. To counteract this, the group is filtered with #luminosity-noclip-2. The filter floods an area in user space of 39.63 by 32766 with white, then copies the group contents (nothing) on top. As a result, the luminosity mask should be filled white, making all masked content visible, completely unaltered.
In short: nothing but useless junk. In theory, it does nothing. In practice, it wastes computing resources and gives oportunity to almost every bug renderers might have to bite you.
If this is what Illustrator produces nowadays, throw it out of the window to never use again.
A clean SVG that is identical in all aspects to the intended one looks like this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43 43">
<linearGradient id="linear-gradient" x1="22.17" y1="60.87" x2="22.17" y2="-17.54" gradientUnits="userSpaceOnUse">
<stop offset="0.21" stop-color="#3f97f5"/>
<stop offset="0.83" stop-color="#3fa9f5"/>
</linearGradient>
<title>Dlogo</title>
<path style="fill:#040f21;" d="M28.43,31.83a23.24,23.24,0,0,1-5.41.78c-6.12,0-8.86-2.07-8.86-11.48S17.44,9.44,23.34,9.44a18.52,18.52,0,0,1,5.09.71l-.51,3.28a16.24,16.24,0,0,0-4.22-.61c-3.62,0-5.16,1.13-5.16,8.18S20,29.22,23.7,29.22a15.69,15.69,0,0,0,4.22-.67Z"/>
<path style="fill:url(#linear-gradient);" d="M22.17,41.31A19.81,19.81,0,1,1,42,21.5,19.83,19.83,0,0,1,22.17,41.31Zm0-35.21a15.4,15.4,0,1,0,15.4,15.4A15.41,15.41,0,0,0,22.17,6.1Z"/>
</svg>
I am trying to make a spherical image of a planet with a night side in shadow, to be rendered in browsers for a simulation web page, but I have been fighting a strange visual problem that I cannot seem to figure out.
Here is an image snip of the SVG as it is displayed in Chrome (this happens in IE also) and then zoomed up 3x:
You will notice that just above the day/night terminator, there is a faint darker horizontal band, about 1/3rd as wide as its distance above the terminator. That should not be there and I cannot figure why it is there or how to get rid of it.
Here is the SVG code in an HTML Snippet for easy viewing:
<div style="position:absolute; z-index:1; margin:15px;
width:640px; height:640px;
background-color:black">
<svg id="svgEa" style="width:100%; height:100%;" viewBox="-5000 -5000 10000 10000" preserveAspectRatio="xMidYMid meet" clip-path="url(#svgEaClip)" transform="scale(1.0,1.0)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- NOTE: All internal units are in KM (or %) -->
<defs id="defsEa">
<clipPath id="svgEaClip">
<rect width="100%" height="100%" />
</clipPath>
<linearGradient id="lgdEaSphere">
<stop style="stop-color:#ffffff;stop-opacity:1.00;" offset="0.00" id="stopEarthCenter" />
<stop style="stop-color:#dfffef;stop-opacity:1.00" offset="0.30" id="stopEarthInner" />
<stop style="stop-color:#91ffc8;stop-opacity:1.00" offset="0.31" id="stopEarthMid" />
<stop style="stop-color:#00A064;stop-opacity:1.00" offset="0.95264" id="stopEarthOuter" />
<stop style="stop-color:#44ffff;stop-opacity:0.66" offset="0.95264" id="stopAirInner" />
<stop style="stop-color:#44ffff;stop-opacity:0.10" offset="1.00" id="stopAirOuter" />
</linearGradient>
<radialGradient id="rgdEaSphere" xlink:href="#lgdEaSphere"
gradientUnits="userSpaceOnUse"
cx="0" cy="0"
fx="0" fy="0"
r="3339.05"
/>
<linearGradient id="lgdEaNightSide"
x1="0%" y1="0%" x2="0%" y2="100%"
spreadMethod="pad" >
<stop style="stop-color:#000000;stop-opacity:0.7;" offset="0.00" id="stopEaMidnight" />
<!-- this stop seems to cause the artifact -->
<stop style="stop-color:#000000;stop-opacity:0.6;" offset="0.99" id="stopEaDusk" />
<stop style="stop-color:#000000;stop-opacity:0.5;" offset="1.00" id="stopEaTerminator" />
</linearGradient>
</defs>
<g id="gEaAll" transform="scale(1.2,1.2)" >
<g id="gEaSunFacing" >
<!-- contains everything that stays oriented with the Sun -->
<circle
id="cEarthAir"
cx="0" cy="0" r="3339.05"
style="display:inline;fill-opacity:1;fill:url(#rgdEaSphere)" />
<!-- overlay to give Earth a night side. -->
<path id="pNight"
style="stroke:none; fill:url(#lgdEaNightSide)"
d="M -3189.05,0
A 3189.05,15945.25 0 1,1 3189.05,0
Z"
/>
</g>
</g>
</svg>
</div>
(If you want you can save this to an HTML (.html) file (add the html and body tags) and then run it in your browser to see it. Or save it to an SVG file (.svg), and remove the div and br tags, if you want to use any SVG tools on it.
This artifact is occurring right at where one of the linear gradient stops are, specifically #stopEaDusk at line 33, in the linear gradient #lgdEaNightSide, which is being used as the fill for the overlay path #pNight. This artifact may seem very faint, but it is real and more pronounced when not zoomed out by 300%. My actual SVG also has a complimentary #pDay overlay that I removed to simplify the code. But when it is added, I get three of these darkness-band artifacts, the one above, one at the corresponding spot on the other side (where I have another dawn/dusk stop) and one right at the midpoint where the two overlays meet. When they are all three visible, it looks horrible, so I cannot just ignore it.
Other points:
As far as I can tell, this is not just a visual illusion as suggested here, as it persists even when blown up. And if it is, I still need to fix it.
I do not believe that it is this old Chrome bug as suggested in this answer, because it appears differently, but mostly because I see it in IE also (though it might be fainter).
tl,dr: What is causing this darkness band and how can I get rid of it?
There seems to be some confusion about what the question is here, so allow me to clarify. The linear gradient lgdEaNightSide was written for an explicit effect, which it seems to be doing, but it is also producing an undesirable side-effect which is not intended, and to the best of my understanding of SVg should NOT be happening.
The desired effect is that the pNight overlay adds:
1. 70% darkness, at the top of its arc (which is very high and off-screen), shading smoothly to 60% darkness 99% of the way down.
2. Then shading quickly from 60% darkness 99% of the way down, to 50% darkness 100% of the way down. This is to provide a dusk-like transition area.
However, in addition to that, it is also adding the undesired effect:
- at about 98.8% of the way down, it gets suddenly darker
- then at about 99.2% of the way down, it gets suddenly lighter again.
This should not be happening, and as far as I know, the SVG I wrote should not be doing this.
What I am looking for is how to keep the first (desired) effect, while getting rid of the second (undesired) effect.
I do not need to be told that the second stop is causing the problem. I know that, I stated it above and I pointed it out in the code comments. I do not need an answer to tell me what I already know. What I am looking for is:
how to fix it while retaining the visual effect that I originally wrote it for, and
Why is it happening, when AFAIK, it should not be happening.
There is nothing wrong with the code.
The banding exists because monitors do not have enough colors to represent the subtle change. You are trying to change 10% opacity over a large area which is not possible with most monitors.
You can determine this is a monitor issue by switching screens. Depending on the quality and the pixel density of the monitor, you will see slightly different results. Some browsers use dithering, which reduces the color banding with the tradeoff of pixelation.
The only way to work around the problem is to introduce more color variation like Prince was getting at.
An answer from another post does a great job of explaining this concept. It's worth a read, but I will quote the solutions to save people a click. https://stackoverflow.com/a/11274627/6794536
If you want to make it less obvious with your current 24-bit color
monitor, you can:
Change your design to introduce a subtle color shift into your
gradient (e.g. from dark blue to gray-green). This causes different
RGB channels bits can transition at different times, breaking up your
bands into a smaller differentiated colors.
Change your design to increase your dynamic range (e.g. from pure
white to pure black) so that you have more color bars to work with.
Change your design to reduce the overall distance that the gradient
occurs over, reducing the widths of the bands.
…or some combination of the above.
I implemented this strategy, but it is not perfect. If you really want to get rid of color banding, you will have to make other tradeoffs. For example, you may not be able to use pure black.
<div style="position:absolute; z-index:1; margin:15px;
width:640px; height:640px;
background-color:#0c0c26">
<svg id="svgEa" style="width:100%; height:100%;" viewBox="-5000 -5000 10000 10000" preserveAspectRatio="xMidYMid meet" clip-path="url(#svgEaClip)" transform="scale(1.0,1.0)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- NOTE: All internal units are in KM (or %) -->
<defs id="defsEa">
<clipPath id="svgEaClip">
<rect width="100%" height="100%" />
</clipPath>
<linearGradient id="lgdEaSphere">
<stop style="stop-color:#ffffff;stop-opacity:1.00;" offset="0.00" id="stopEarthCenter" />
<stop style="stop-color:#dfffef;stop-opacity:1.00" offset="0.30" id="stopEarthInner" />
<stop style="stop-color:#91ffc8;stop-opacity:1.00" offset="0.31" id="stopEarthMid" />
<stop style="stop-color:#00A064;stop-opacity:1.00" offset="0.95264" id="stopEarthOuter" />
<stop style="stop-color:#44ffff;stop-opacity:0.66" offset="0.95264" id="stopAirInner" />
<stop style="stop-color:#44ffff;stop-opacity:0.10" offset="1.00" id="stopAirOuter" />
</linearGradient>
<radialGradient id="rgdEaSphere" xlink:href="#lgdEaSphere"
gradientUnits="userSpaceOnUse"
cx="0" cy="0"
fx="0" fy="0"
r="3339.05"
/>
<linearGradient id="lgdEaNightSide" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
<stop style="stop-color:#00033e;stop-opacity:0.7;" offset="0.00" id="stopEaMidnight"></stop>
<!-- this stop seems to cause the artifact -->
<stop style="stop-color:#090d24;stop-opacity:0.6;" offset="0.99" id="stopEaDusk"></stop>
<stop style="stop-color:#000;stop-opacity:0.5;" offset="1.00" id="stopEaTerminator"></stop>
</linearGradient>
</defs>
<g id="gEaAll" transform="scale(1.2,1.2)" >
<g id="gEaSunFacing" >
<!-- contains everything that stays oriented with the Sun -->
<circle
id="cEarthAir"
cx="0" cy="0" r="3339.05"
style="display:inline;fill-opacity:1;fill:url(#rgdEaSphere)" />
<!-- overlay to give Earth a night side. -->
<path id="pNight"
style="stroke:none; fill:url(#lgdEaNightSide)"
d="M -3189.05,0
A 3189.05,15945.25 0 1,1 3189.05,0
Z"
/>
</g>
</g>
</svg>
</div>
It is because you are using an extra stop value in the gradient of overlay. As you are using linear gradient(lgdEaNightSide) in overlay to give earth a night side as below.
You can see you are using two offset values, one at 0.99 and other at 1. This is the reason you are getting faint darker horizon band.
<linearGradient id="lgdEaNightSide" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
<stop style="stop-color:#000000;stop-opacity:0.7;" offset="0.00" id="stopEaMidnight" />
<!-- this stop seems to cause the artifact -->
<stop style="stop-color:#000000;stop-opacity:0.6;" offset="0.99" id="stopEaDusk" />
<stop style="stop-color:#000000;stop-opacity:0.5;" offset="1.00" id="stopEaTerminator" />
</linearGradient>
Just delete an extra stop value and it will work, please find working code below:
<div style="position:absolute; z-index:1; margin:15px;
width:640px; height:640px;
background-color:black">
<svg id="svgEa" style="width:100%; height:100%;" viewBox="-5000 -5000 10000 10000" preserveAspectRatio="xMidYMid meet" clip-path="url(#svgEaClip)" transform="scale(1.0,1.0)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- NOTE: All internal units are in KM (or %) -->
<defs id="defsEa">
<clipPath id="svgEaClip">
<rect width="100%" height="100%" />
</clipPath>
<linearGradient id="lgdEaSphere">
<stop style="stop-color:#ffffff;stop-opacity:1.00;" offset="0.00"
id="stopEarthCenter" />
<stop style="stop-color:#dfffef;stop-opacity:1.00" offset="0.30"
id="stopEarthInner" />
<stop style="stop-color:#91ffc8;stop-opacity:1.00" offset="0.31"
id="stopEarthMid" />
<stop style="stop-color:#00A064;stop-opacity:1.00" offset="0.95264"
id="stopEarthOuter" />
<stop style="stop-color:#44ffff;stop-opacity:0.66" offset="0.95264"
id="stopAirInner" />
<stop style="stop-color:#44ffff;stop-opacity:0.10" offset="1.00"
id="stopAirOuter" />
</linearGradient>
<radialGradient id="rgdEaSphere" xlink:href="#lgdEaSphere"
gradientUnits="userSpaceOnUse" cx="0" cy="0" fx="0"
fy="0" r="3339.05" />
<linearGradient id="lgdEaNightSide" x1="0%" y1="0%" x2="0%" y2="100%"
spreadMethod="pad">
<stop style="stop-color:#000000;stop-opacity:0.7;" offset="0.00"
id="stopEaMidnight" />
<!-- this stop seems to cause the artifact -->
<stop style="stop-color:#000000;stop-opacity:0.5;" offset="1.00"
id="stopEaTerminator" />
</linearGradient>
</defs>
<g id="gEaAll" transform="scale(1.2,1.2)">
<g id="gEaSunFacing">
<!-- contains everything that stays oriented with the Sun -->
<circle id="cEarthAir" cx="0" cy="0" r="3339.05"
style="display:inline;fill-opacity:1;fill:url(#rgdEaSphere)" />
<!-- overlay to give Earth a night side. -->
<path id="pNight" style="stroke:none; fill:url(#lgdEaNightSide)" d="M -3189.05,0
A 3189.05,15945.25 0 1,1 3189.05,0
Z" />
</g>
</g>
</svg>
</div>
I can't figure out why this gradient isn't working in Chrome/Firefox/IE.
Its working in svg-editor (inside browser) and Inkscape.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="300" width="85" version="1.1">
<defs>
<linearGradient id="fill_bg" x2="0.5">
<stop stop-color="#8e8e8e" offset="0"/>
<stop stop-color="#d6d6d6" offset="0.59766"/>
</linearGradient>
</defs>
<g>
<path d="m3.5,16.5c12.5,6.6507,21,6.6507,33,0v271.47c-12.5,7.1172-22,7.1172-33,0v-135.74-135.73,0.00002,0.00001,0.00002,0.00001z" stroke="#352c2c" fill="url(#fill_bg)"/>
</g>
</svg>
The stroke is showing correctly, but the fill is missing completely (transparent),
Did I use something that browsers don't support?
Sorry, nevermind I had an CSS defintion for all path elements.
Once I removed that everything worked fine.
I'd like to create an inline-svg text element with a fill attribute loading a gradient defined in an external svg document.
Inline SVG
<svg>
<text fill="url(/path/to/svg.svg#gradient)">Mask this text</text>
</svg>
/path/to/svg.svg
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#ffeab4; stop-opacity:1" />
<stop offset="30%" style="stop-color:#ed9f3b; stop-opacity:1" />
<stop offset="40%" style="stop-color:#ed9f3b; stop-opacity:1" />
<stop offset="70%" style="stop-color:#ffeab4; stop-opacity:1" />
<stop offset="100%" style="stop-color:#ed9f3b; stop-opacity:1" />
</linearGradient>
</defs>
</svg>
Here is a jsfiddle test case and here is a gist of the SVG gradient I'm trying to load.
Question
Is it possible to load an external fill into an inline-svg element?
Have I just defined my external gradient incorrectly or am referencing it incorrectly?
Using external fill and stroke is allowed by the SVG spec, but not all browsers implement that part. Opera and Firefox does, but not Chrome for example.
A live example here.
The syntax you describe is correct. E.g fill="url(example.svg#gradient)" will fetch the external example.svg and use the specified gradient from that file.
I was inspecting the code of a website and I noticed they had an unusual value for the background property of an element via CSS. It seems to be a gradient. Does anyone know what it is? If it is valid? And what browsers support it?
Here is the code:
background:transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);
I appreciate any and all help!
Thanks in Advance! :-)
Well, first thing is to de-base64 it:
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<linearGradient id="hat0" gradientUnits="objectBoundingBox" x1="50%" y1="100%" x2="50%" y2="0%">
<stop offset="0%" stop-color="#fff" stop-opacity="0.65" />
<stop offset="100%" stop-color="#fff" stop-opacity="0.9" />
</linearGradient>
<rect x="0" y="0" width="100" height="100" fill="url(#hat0)" />
</svg>
Thus you can see that yes, it is a gradient. Non-IE browsers support this, and IE 9+ supports it as well.
I think all modern browsers support it. This is a scalable vector graphic (you often find those used for maps on wikipedia) file that is base64-encoded, that means it consists many bytes which wer converted to be used in ASCII character sets.
It is base64 encoded SVG file. This convention is a means of using a SVG graphic file as an embedded background image. I do the same thing with the Travelocity logo here http://mailmarkup.org/slideshow.xhtml