SVG Scaling for Line Chart - svg

Question

I would like to have a responsive SVG for a line chart. This should have three areas that combine fixed and scalable elements.
The pink element should be a scaling child svg (I need to define a child coordinate system for drawing a polyline), the grey bits are used for drawing axis, and should have limited scaling, since text should render in a relativaly simple font.
Finally, I would like to do this without JavaScript.
Some of the problems I have faced and which might help with a solution:
If I could give the <svg> element that is the pink area the following x="20px" width="calc(100% - 20px)" height="calc(100% - 20px)", this would largely solve my problem, but this triggers a parse error. I haven't managed to get any variations using CSS to work either.

Answer 1

(Another answer would be well worth it if someone can do this with "pure" svg).
I hacked it using HTML layout and multiple SVGs. This is the code I am using:
<div style="width: 100%; height: 300px">
<!-- The Y axis -->
<svg style="width: 40px; height: calc(100% - 20px); float: left;">
<g class="yaxis">
<line x1="99%" x2="99%" y1="0%" y2="100%" stroke="black" vector-effect="non-scaling-stroke"></line>
<g class="tick tick-yaxis">
<text x="99%" y="100%" text-anchor="end">$0.0</text>
<line x1="98%" x2="100%" y1="100%" y2="100%" stroke="black"></line>
</g>
<!-- ... -->
</g>
</g>
</svg>
<!-- The actual chart -->
<svg viewBox="0 0 100 100" preserveAspectRatio="none" style="width: calc(100% - 40px); height: calc(100% - 20px); float: left;">
<polyline points="0,50 45.46574414322495,0 65,100 75,100 89.52839708894965,0 91.10141646672459,100 98.21939424857649,0 100,100"
vector-effect="non-scaling-stroke" stroke="red" fill="none"></polyline>
</svg>
<!-- x axis -->
<svg style="clear: both; margin-left: 40px; width: calc(100% - 40px); height: 20px;">
<g class="xaxis">
<line x1="0%" x2="100%" y1="1%" y2="1%" stroke="black" vector-effect="non-scaling-stroke"></line>
<g class="tick tick-xaxis">
<text x="5%" y="100%" text-anchor="middle">28 Feb 2011</text>
<line x1="5%" x2="5%" y1="94%" y2="96%" stroke="black"></line>
</g>
</svg>
</div>

Answer 2

Add vector-effect="non-scaling-stroke" to your path
div {
width: 100%;
height: 180px;
background: #f5f5f5;
background: none;
}
svg > path{
stroke: teal;
stroke-width: 3;
fill: none;
}
#SVGgrid {opacity: 0.15;}
.SVGLines{filter: drop-shadow(0.9px 4px 0.6px rgba(0,0,0,0.15));}
.red {stroke: #fa7a17;}
.blue {stroke: #4185f5;}
.yellow {stroke: #fbbd04;}
<div>
<svg viewBox="0 0 52 100" preserveAspectRatio="none" style="width: 100%; height: 100%;">
<defs>
<pattern id="SVGGT" patternUnits="userSpaceOnUse" width="1" height="4">
<line x1="1" y1="0" x2="1" y2="10" vector-effect="non-scaling-stroke" stroke="black"/>
<line x1="0" y1="4" x2="4" y2="4" vector-effect="non-scaling-stroke" stroke="black"/>
</pattern>
</defs>
<rect id="SVGgrid" width="100%" height="100%" fill="url(#SVGGT)" />
<path class="SVGLines red" vector-effect="non-scaling-stroke" d="
M 0.1,59
S 0.5,60 1,59
S 1.5,59 2,57
S 2.5,58 3,55
S 3.5,56 4,54
S 4.5,55 5,53
S 5.5,53 6,52
S 6.5,51 7,51
S 7.5,50 8,49
S 8.5,47 9,48
S 9.5,46 10,46
S 10.5,42 11,43
S 11.5,43 12,42
S 12.5,40 13,39
S 13.5,36 14,36
S 14.5,36 15,35
S 15.5,33 16,33
S 16.5,33 17,30
S 17.5,25 18,27
S 18.5,28 19,26
S 19.5,26 20,24
S 20.5,23 21,21
S 21.5,22 22,20
S 22.5,22 23,23
S 23.5,25 24,26
S 24.5,28 25,27
S 25.5,27 26,28
S 26.5,29 27,29
S 27.5,34 28,31
S 28.5,35 29,34
S 29.5,37 30,35
S 30.5,38 31,37
S 31.5,41 32,38
S 32.5,38 33,40
S 33.5,41 34,41
S 34.5,44 35,44
S 35.5,50 36,47
S 36.5,53 37,50
S 37.5,53 38,53
S 38.5,57 39,56
S 39.5,56 40,55
S 40.5,52 41,53
S 41.5,54 42,51
S 42.5,50 43,50
S 43.5,47 44,47
S 44.5,49 45,46
S 45.5,46 46,45
S 46.5,45 47,42
S 47.5,41 48,41
S 48.5,43 49,40
S 49.5,36 50,38
S 50.5,34 51,36
S 51.5,34 52,33
" stroke="black" fill="transparent" stroke-linecap="round"/>
<path class="SVGLines blue" vector-effect="non-scaling-stroke" d="
M 0.1,25
S 0.5,26 1,25
S 1.5,26 2,27
S 2.5,31 3,30
S 3.5,31 4,31
S 4.5,32 5,34
S 5.5,36 6,35
S 6.5,38 7,36
S 7.5,38 8,38
S 8.5,41 9,41
S 9.5,39 10,39
S 10.5,34 11,36
S 11.5,35 12,33
S 12.5,33 13,32
S 13.5,33 14,30
S 14.5,29 15,28
S 15.5,26 16,27
S 16.5,25 17,26
S 17.5,23 18,25
S 18.5,25 19,22
S 19.5,23 20,21
S 20.5,20 21,19
S 21.5,17 22,16
S 22.5,17 23,14
S 23.5,14 24,11
S 24.5,14 25,13
S 25.5,18 26,16
S 26.5,18 27,19
S 27.5,25 28,22
S 28.5,17 29,19
S 29.5,19 30,17
S 30.5,14 31,16
S 31.5,14 32,14
S 32.5,13 33,13
S 33.5,11 34,10
S 34.5,13 35,11
S 35.5,10 36,12
S 36.5,15 37,14
S 37.5,17 38,16
S 38.5,14 39,13
S 39.5,16 40,16
S 40.5,19 41,18
S 41.5,21 42,19
S 42.5,19 43,20
S 43.5,20 44,21
S 44.5,24 45,23
S 45.5,22 46,24
S 46.5,28 47,27
S 47.5,28 48,28
S 48.5,29 49,29
S 49.5,34 50,31
S 50.5,36 51,33
S 51.5,34 52,34
" stroke="black" fill="transparent" stroke-linecap="round"/>
<path class="SVGLines yellow" vector-effect="non-scaling-stroke" d="
M 0.1,75
S 0.5,78 1,75
S 1.5,76 2,78
S 2.5,84 3,81
S 3.5,81 4,82
S 4.5,86 5,85
S 5.5,86 6,87
S 6.5,89 7,90
S 7.5,91 8,88
S 8.5,85 9,86
S 9.5,85 10,83
S 10.5,79 11,81
S 11.5,79 12,78
S 12.5,78 13,75
S 13.5,72 14,72
S 14.5,68 15,70
S 15.5,65 16,67
S 16.5,65 17,66
S 17.5,68 18,65
S 18.5,66 19,63
S 19.5,62 20,61
S 20.5,60 21,60
S 21.5,55 22,57
S 22.5,59 23,56
S 23.5,52 24,53
S 24.5,57 25,54
S 25.5,59 26,56
S 26.5,60 27,59
S 27.5,63 28,60
S 28.5,62 29,62
S 29.5,58 30,60
S 30.5,57 31,57
S 31.5,52 32,54
S 32.5,55 33,52
S 33.5,51 34,51
S 34.5,50 35,48
S 35.5,46 36,46
S 36.5,47 37,44
S 37.5,42 38,41
S 38.5,41 39,39
S 39.5,37 40,36
S 40.5,37 41,34
S 41.5,31 42,32
S 42.5,31 43,30
S 43.5,28 44,27
S 44.5,25 45,26
S 45.5,27 46,24
S 46.5,23 47,21
S 47.5,21 48,18
S 48.5,20 49,17
S 49.5,13 50,15
S 50.5,16 51,14
S 51.5,11 52,12
" stroke="black" fill="transparent" stroke-linecap="round"/>
</svg>
</div>