I have an SVG that was provided to me by a designer. It was created in and exported from Illustrator using File > Export > As SVG. It should be a circle with a gradient effect but in IE / Edge it just shows as a solid colour.
I have tested this in all other browsers and it works fine.
Is anyone able to see what the problem is?
Here is the SVG content:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="368.7939mm" height="368.7939mm" viewBox="0 0 1045.4 1045.4001">
<defs>
<style>.a{fill:url(#a);}</style>
<linearGradient id="a" x1="1052.9643" y1="795.8587" x2="1053.9644" y2="795.8587" gradientTransform="matrix(1045.3361, 0, 0, -1045.3359, -1100580.4792, 832495.0613)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#27347f"/>
<stop offset="0.9997" stop-color="#8c9090"/>
</linearGradient>
</defs>
<title>circle-test</title>
<path class="a" d="M643.8,32.7c-288.7,0-522.7,234-522.7,522.7s234,522.7,522.7,522.7,522.7-234,522.7-522.7S932.5,32.7,643.8,32.7Zm0,837.1c-173.7,0-314.5-140.8-314.5-314.5S470.1,240.8,643.8,240.8,958.3,381.6,958.3,555.3,817.5,869.8,643.8,869.8Z" transform="translate(-121.1 -32.7)"/>
</svg>
Note: I'm not using this code inline. This code is placed inside a .svg file which is just included in the page like a normal image file.
Thank you!
Related
This question already has an answer here:
XML SVG - persist the end state of an animation
(1 answer)
Closed 1 year ago.
I just made a simple SVG animation using the tag "animate" inside the SVG tag group. It works nicely BUT right after the animation is completed, it goes back to the beginning, to the initial frame, then stops.
How should I modify my code inside the animate tag in order to keep the animation still in the last frame?
Thanks,
How should I modify my code inside the animate tag in order to keep
the animation still in the last frame?
To achieve this use the fill =" freeze " attribute
Below is an example without using fill =" freeze "
As in your description - the figure returns to its original state
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="200" viewBox="0 0 400 200" style="border:1px solid gray;" >
<circle cx="30" cy="100" r="30" fill="purple" >
<animate attributeName="cx" begin="svg1.click" dur="3s" values="30;300" />
</circle>
</svg>
Second example using fill =" freeze "
After the animation ends, the shape will remain in the last frame of the animation.
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="200" viewBox="0 0 400 200" style="border:1px solid gray;" >
<circle cx="30" cy="100" r="30" fill="purple" >
<animate attributeName="cx" begin="svg1.click" dur="3s" values="30;300" fill="freeze" />
</circle>
</svg>
I have a really odd Safari bug. I have an image inside an SVG shape path, here's the code:
<svg viewBox="0 0 367 367" height="367" width="367" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="bias" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
<image height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/c/cb/ADAC-Zentrale%2C_Munich%2C_March_2017-01.jpg"/>
</pattern>
</defs>
<path d="M0,183.5 L0,0 L183.5,0 C284.844252,0 367,82.1557484 367,183.5 C367,284.844252 284.844252,367 183.5,367 C82.1557484,367 0,284.844252 0,183.5 Z" fill="url(#bias)"></path>
</svg>
The image renders fine on the home page but the same code on all other pages renders the shape as black and no image, although in the inspector I can see the image is loaded. All other browsers it's fine.
The left shape is an example of it rendering correctly on the home page and the right is how it renders on every other page. Same template, same code.
Any ideas? Been pulling my hair out for hours, thanks.
Turns out it was a <base> tag in the head messing with the relative url.
Similar issue to this issue SVG Gradient turns black when there is a BASE tag in HTML page?
Thanks
I have produced a tree diagram using svg as rectangular nodes in D3js. Here is the bl.ock for it:
http://bl.ocks.org/Coola85/2450007804d9508866616640ac1272b8/fea7a37158edf9accd749a6fa3399800bea9bbad
The output in the browser looks like this and the aim is to be able to save this as an SVG:
I use SVG Crowbar (https://nytimes.github.io/svg-crowbar/) to save the svg using Google Chrome.
When I try to open the svg in InkScape it pixelates the rectangles and it appears like this.
Adobe Illustrator completely fails to open the rectangles at all stating that a plugin is required. I searched everywhere but no such plugin exists.
I would like to find a way so that the images (in this case rectangles) still appear sharp and are vector paths/shapes.
The XML editor for inkscape shows that it is using the xlink:href for the svg file as shown below.
Here is the code for the Main SVG file output:
<?xml version="1.0" standalone="no"?>
<svg width="960" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="font-family:serif;height:500px;perspective-origin:480px 250px;transform-origin:480px 250px;width:960px;-moz-text-size-adjust:auto;">
<g transform="translate(120,20)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<path class="link" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;fill:none;stroke:rgb(255, 0, 0);stroke-width:2px;" d="M0,230C90,230 90,115 180,115" />
<path class="link" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;fill:none;stroke:rgb(0, 128, 0);stroke-width:2px;" d="M0,230C90,230 90,345 180,345" />
<g class="node" transform="translate(180,345)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<image xlink:href="rect2.svg" x="-12px" y="-12px" width="24px" height="24px" style="font-family:serif;height:auto;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;" />
<text x="15" dy=".35em" text-anchor="start" style="font-family:sans-serif;font-size:12px;height:auto;line-height:14.4px;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">Level 2: B</text>
</g>
<g class="node" transform="translate(180,115)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<image xlink:href="rect2.svg" x="-12px" y="-12px" width="24px" height="24px" style="font-family:serif;height:auto;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;" />
<text x="15" dy=".35em" text-anchor="start" style="font-family:sans-serif;font-size:12px;height:auto;line-height:14.4px;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">Level 2: A</text>
</g>
<g class="node" transform="translate(0,230)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<image xlink:href="rect.svg" x="-12px" y="-12px" width="24px" height="24px" style="font-family:serif;height:auto;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;" />
<text x="-15" dy=".35em" text-anchor="end" style="font-family:sans-serif;font-size:12px;height:auto;line-height:14.4px;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;text-anchor:end;">Top Level</text>
</g>
</g>
</svg>
Any help is appreciated
This is to be expected in the current Inkscape version (0.92.3) and previous versions that support display of linked SVG files.
The next major version will still display embedded and linked SVG files as raster images, but it will allow you to set an import resolution, so you can make them large enough so they will appear crisp.
But this is just how it displays in Inkscape - if you plan to use the SVG file in a browser later, it doesn't matter if it looks ugly while you are editing it. It will look correct, if the browser (or whichever other program you plan to use) can display linked SVG images correctly.
If you need to export a PNG image, then you should consider importing the rectangles, maybe using clones. You can use the align+distribute dialog to swap positions of objects, this makes it easy to place them in the exact same location as they were before.
For some reason my spinner.svg is not animating when using xlink:href. Embedding the SVG on the page and using xlink:href seems to work fine, as the snippet below shows.
The problem: static (and solid!) spinner instead of animation
Why are the animation tags of the SVG suddenly not taking effect? The reference must be working since the image is actually displaying.
EDIT: Could this have to do with the shadow dom and xref?
According to Sara Soueidan "The target element must be part of the current SVG document fragment". I might be overloading what "document fragment" means, but to me document fragments belong in Shadow DOM land, and I suspect that SMIL animations might not work when using <use> statements due to this?
Working versions
.xlinked {
color: green;
}
img {
color: red; // not taking effect - of course! just a test.
}
.embedded {
color: blue;
}
<h1>xlink local</h1>
<svg class="xlinked">
<!-- could not get this external reference to work?
<use xlink:href="http://imgh.us/spinner_1.svg" />
-->
<use xlink:href="#spinner" />
</svg>
<h1>embedded</h1>
<div class="embedded">
<svg id="embedded" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/>
<circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round">
<animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/>
<animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/>
</circle>
</svg>
</div>
<h1>img</h1>
<img src="http://imgh.us/spinner_1.svg" />
<h1>External absolute xlink (not working)</h1>
<svg>
<!-- could not get this external reference to work. should be the same as a local reference? -->
<use xlink:href="http://imgh.us/spinner_1.svg" />
</svg>
<h1>Source SVG with symbols for xlink reference </h1>
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="spinner" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/><circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/></circle></symbol></svg>
In SVG1.1, Use element requires reference to SVG fragment not SVG URL. Try to add id attribute to root svg element of external SVG file and add hash string to href value of use element, like this.
external svg(spinner_1.svg)
<svg xmlns="http://www.w3.org/2000/svg" id="root">
<!--svg structure-->
</svg>
html uses external SVG file
<svg>
<use xlink:href="http://imgh.us/spinner_1.svg#root" />
</svg>
Note:In SVG2, you can set SVG URL to href attribute of use element. See https://www.w3.org/TR/2016/CR-SVG2-20160915/struct.html#UseElement
I have an SVG image that specifies a specific height and width. All the objects in the SVG image are created to use this width and height. Something like this:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600">
<g>
<circle cx="300" cy="300" r="295" fill="red" stroke="black" stroke-width="10"/>
</g>
</svg>
Which makes a 600 pixel red circle with a black border:
How do I scale this SVG image (to say 200x200) without having to go through and update all the objects (in this case just the red circle) contained within it?
To resize an SVG image you need to introduce a viewBox attribute that contains the the original size pixels. Then you can change the width and height to whatever you want.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 600 600">
<g>
<circle cx="300" cy="300" r="295" fill="red" stroke="black" stroke-width="10"/>
</g>
</svg>
That way the coordinate system to which the image is drawn is still the original 600x600, but the image displays scaled to 200x200.
Alternate method: assuming that all these SVG images are individual files, you can use either <object>, <embed> or <img> tag to reference this SVG file, then set width=200 and height=200 to rescale it.
Eg: <img src="path/to/somefile.svg" width="200" height="200"...../>