I am trying to animate the SVG2 Geometry Property r, the radius property of a Circle Element.
I read that the property can be used as CSS property in browsers supporting SVG2 (see Resizing SVG Circle Radius Using CSS Animation).
Now I notice that animating r does only seem to work in Firefox if I express values as percentages. If I use absolute values, the circle is not being animated, see minimum reproduction CodeSandbox.
Does Firefox lack SVG2 support here?
As pointed out, stating lengths in pixel does the job.
The spec indeed says that absolute lenths must be given in physical units.
Omiting them will Chrome use px as fallback unit, while Firefox won't.
Related
I'm using several libraries to generate SVG images in-browser, which can be bounced off the server through svgexport to generate PNGs or JPEGs at user-specified resolutions. (This works as expected.)
I'd like to offer the user the option of downloading the SVG that gets fed into the conversion, with the resolution used to set the width and height attributes. When I do that, the viewbox is not scaled to the specified width and height, but is padded so that the image occupies the original size area in the upper left.
While looking for solutions, I found images in the W3C documentation that illustrate the problem. If you open these images in Chrome and use the inspector to change the width and height properties,
ViewBox.svg will expand to fill the width and height (linked from here)
PreserveAspectRatio.svg will be padded to stay in the upper left (linked from here)
This does not appear related the presence or value of thepreserveAspectRatio property, or the nesting of svg tags. My files are rendered as padded rather than scaled in Chrome/Chromium, Firefox, Safari/WebKit, Opera, Inkscape, and Gapplin.
How do I ensure that my SVG is scaled rather than padded to fill the width and height?
The viewbox is not scaled when it's entered as viewbox rather than viewBox; svg attribute names are case sensitive.
The second link does not have a viewBox attribute, and adding a viewbox (lowercase) attribute has no effect.
As I understand it, the SVG attribute vector-effect="non-scaling-stroke" should prevent strokes from being distorted (made thicker or thinner) if/when the SVG object is scaled or stretched.
For example - in this fiddle (http://jsfiddle.net/1cj0ovae/5/), I have two SVG objects; both are 5x wider than they are tall. Because the view box of both calls for a square, the SVGs are stretched and distorted.
In the upper SVG - the green path is distorted - it's much thicker than it's supposed to be (stroke-width="2").
In the lower SVG, however, the red path is displayed "correctly" - a 2px thick stroke - because it has the vector-effect="non-scaling-stroke" attribute set.
This seems to work in Chrome, Safari, and Firefox, but not in even recent versions of IE (e.g., IE10).
Is this an IE bug? Is there a workaround?
vector-effects is part of SVG 1.2 tiny and the upcoming and as-yet-unfinished SVG 2 specifications.
IE has only targeted SVG 1.1 which does not have vector-effects. Other UAs have cherry picked parts of SVG 1.2 tiny such as vector-effects but no current UA implements it all (Opera 12 did I think).
To work around it figure out how wide the stroke should be using javascript. I.e. work out the difference between the transform that's applied to the shape and apply the inverse of that to the stroke-width. It's not straightforward as I found when I implemented this in Firefox.
I have an SVG with two images. These images have feComponentTransfer applied to them.
For these images, color-interpolation-filters is set to linearRGB and sRGB, correspondingly:
http://jsfiddle.net/9eU37/6/
Here's how it renders in Safari and Chrome:
(linearRGB on the left, sRGB on the right)
Here's how PhantomJS renders it:
(linearRGB on the left, sRGB on the right)
As you can see, PhantomJS seems to ignore color-interpolation-filters (there is no difference between the two images). Another odd thing is that the resulting image matches neither sRGB nor linearRGB browser version.
Is there anything I can do it make it render SVG like the browser does, and respect the setting?
You can do your own gamma correction manually by using an feComponentTransfer type=gamma. Usually a 2.2 for the exponent will do it.
I've been working on a charting library using d3 and SVG to display a series of rectangles. The dataset governs the number of rectangles to be displayed in a given area, and in most cases, the math doesn't work out cleanly, meaning the rectangles don't start and end on whole numbers. Firefox, Chrome and Safari all address this contingency by antialiasing the rectangles. IE seems to just round to the nearest pixel value, and refuses to antialias any rect elements. I've tried changing shape-rendering and the like, to no avail.
Here's a side-by-side comparison of the same data in IE10 and the most recent Chrome release:
IE10:
Chrome:
Is anyone aware of a fix for this that doesn't involve changing the structure of the SVG markup? Setting CSS properties or tag attributes is preferable to changing the elements themselves. Barring that, has anyone seen any Microsoft documentation explaining the rationale for this decision? I haven't been able to turn up any thus far.
IE doesn't seem to care about the shape-rendering property, but I've found that you can force it to anti-alias shapes by specifying a tiny rotate transformation:
svg {
transform: rotate(.00001deg); /* hack to force anti-aliasing in IE */
}
Tested on IE11.
I tried to resize svg file to be opened in illustrator with smaller width and height(pixels or cm), I did this by changing width, height and viewBox attributes in <svg> tag, but it doesn't work at all. By search I have found that transform attribute via matrix value affects the real resizing of the figure, any ideas about ready made functions or scripts using python or librsvg to successfully scaling the svg figure, by the way I'm using inkscape to produce svg files. THANKS
You could try svg scour, that should be able to find a good viewBox to use (note spellning and uppercase 'B'). Then change only the width and height attributes to be whatever you want, and hopefully that should work.