i have a problem with SVGs (different sizes) and effetcs (strokes, shadows etc.) The stroke (for example) has not the same size because the icon B is smaller and it is "zoomed" to 500px.
What is the correct way to fix this issue?
- must i calculate the effect for every SVG individually? :/
- or is there an option to only zoom the SVG and not the effect?
- or can i recalculate (with PHP) the SVGs? So that every SVG has the same size?
FIDDLE
http://jsfiddle.net/tqef7qkp/
CSS
stroke: #39A02E;
stroke-width: 5;
Example
A)
<svg xml:space="preserve"
preserveAspectRatio= "xMinYMin meet"
enable-background="new 0 0 500 500"
viewBox="0 0 500 500"
width="500px"
height="500px"
y="0px"
x="0px"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" version="1.1">
B)
<svg xml:space="preserve"
preserveAspectRatio= "xMinYMin meet"
enable-background="new 0 0 50 50"
viewBox="0 0 50 50"
width="500px"
height="500px"
y="0px"
x="0px"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" version="1.1">