Why do you even need SVG if you're on the web already though? Nothing in these code pictures requires more than basic CSS and HTML. You can go wild with fonts, gradients, shadows, etc. to make beautiful looking pre and code elements. Tools like prismjs will syntax highlight with spans. Everything is in plain old semantic HTML with aria properties where appropriate.
<svg role="img" aria-label="[title + description]"> <title>[title]</title> <desc>[long description]</desc> ... </svg >