SVG Line Graph

HTML

<svg overflow="visible" style="padding:24px 0px 24px 40px">
      {/*Grid lines*/}
			<svg role="img" viewBox="0 0 300 100" preserveAspectRatio="none">
				<svg viewBox="0 0 300 100" preserveAspectRatio="none">
					<line y1="0" y2="100" x1="0" x2="0" stroke-width="0.2" stroke="black"></line>
					<line y1="0" y2="100" x1="75" x2="75" stroke-width="0.2" stroke="black"></line>
					<line y1="0" y2="100" x1="150" x2="150" stroke-width="0.2" stroke="black"></line>
					<line y1="0" y2="100" x1="225" x2="225" stroke-width="0.2" stroke="black"></line>
					<line y1="0" y2="100" x1="300" x2="300" stroke-width="0.2" stroke="black"></line>
					<line x1="0" x2="300" y1="0" y2="0" stroke-width="0.2" stroke="black"></line>
					<line x1="0" x2="300" y1="25" y2="25" stroke-width="0.2" stroke="black"></line>
					<line x1="0" x2="300" y1="50" y2="50" stroke-width="0.2" stroke="black"></line>
					<line x1="0" x2="300" y1="75" y2="75" stroke-width="0.2" stroke="black"></line>
					<line x1="0" x2="300" y1="100" y2="100" stroke-width="0.2" stroke="black"></line>
				</svg>
			</svg>
      {/*Legend*/}
			<svg x="100%" overflow="visible">
				<text text-anchor="end" dy="-8px">
					<tspan fill="red"> ⬤</tspan>
					Line A<tspan fill="blue"> ⬤</tspan>
					Line B
				</text>
			</svg>
      {/*Date lines*/}
			<svg viewBox="0 0 300 100" preserveAspectRatio="none">
				<path
					d="M 0 75 M 0 75  L 75 50 L 150 15 L 225 67 L 300 67 L 300 67"
					stroke-width="3"
					stroke="red"
					fill="transparent"
					vector-effect="non-scaling-stroke"
				></path>
				<path
					d="M 0 92 M 0 92  L 75 72 L 150 80 L 225 50 L 300 50 L 300 50"
					stroke-width="3"
					stroke="blue"
					fill="transparent"
				></path>
			</svg>
			<svg overflow="visible">
        {/*Y Axis*/}
				<text x="0%" text-anchor="end" y="0%">
					40
				</text>
				<text x="0%" text-anchor="end" y="25%">
					30
				</text>
				<text x="0%" text-anchor="end" y="50%">
					20
				</text>
				<text x="0%"...