= Scalable Vector Graphics
{tag=Good}
{wiki}
= SVG
{c}
{synonym}
{title2}
<Companies> have been really slow to support SVG features in their browsers, and that is very saddening: https://medium.com/@michaelmangial1/introduction-to-scalable-vector-graphics-6450c03e8d2e
You can't drop SVG support for `canvas` until there's a way to run untrusted <JavaScript> on the browser!
<SVG> does have some compatibility annoyances, notably <SVG fonts>. But we should as a society work to standardize and implement a fix those, the benefits of SVG are just too great!
Examples:
* \a[svg/svg.svg] a minimal somewhat sane SVG:
* if the `width` and `height` properties were not given, you get the default 300x150, which seems to be set in the SVG standard:
* https://stackoverflow.com/questions/40156710/why-does-this-svg-image-have-a-height-of-150px
* https://css-tricks.com/scale-svg
* how to add na SVG image to a <HTML> file:
* \a[svg/svg.html]: external image. The included file is \a[svg/svg.svg].
* \a[svg/inline.html]: inline.
* \a[svg/billion-laughs.svg]
* \a[svg/html.svg]
* \a[svg/triangle.svg]
* \a[svg/viewBox.svg]: this attribute allows you to control the default SVG `svg width=` and `height=` while keeping the coordinates of the drawing untouched. If the `viewBox` aspect ratio differs from the width/height ratio, you likely want to play with `preserveAspectRatio`, otherwise you would get white spaces by default on the generated image
* <CSS> with SVG:
* \a[svg/style.svg]: inline CSS
* \a[svg/style-external.svg]: external CSS with: `<?xml-stylesheet type="text/css" href="svg.css" ?>`, see also: https://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css
* \a[svg/subdir/style-external.html]: is the relative CSS relative to the HTML or to the SVG? Answer: to the SVG... OMG. So how to make it work reliably?
* \a[svg/current-color.html] and \a[svg/current-color.svg]: illustrates `fill="currentColor"`. Only works for inline SVG however... See also: https://stackoverflow.com/questions/13000682/how-do-i-have-an-svg-image-inherit-colors-from-the-html-document/13002311
* <JavaScript> with SVG:
* \a[svg/script.svg]
* \a[svg/external-js.svg]
* \a[svg/defs.html] hows how `defs` works
* \a[svg/defs-external.html] tries to include external `defs` from \a[svg/defs.svg], but that fails like everything else related to external SVGs
Back to article page