CSS effect (shadow, stroke) on SVG with different sizes

Question

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">

Answer 1

You can specify stroke-widths in percentages, not just userSpace units. You can also specify shadow filters the same way (in objectBoundingBox units). This will size your strokes to the size of your svg's vs. the size of your viewboxes.

Answer 2

<style type="text/css" >
  <![CDATA[
   g {  stroke: #39A02E;  
   stroke-width: 1;  
   fill:url(#rgrad);}
  ]]>
</style>

That could fix the stroke problem.

The output: