Scalable Vector Graphics (SVG)

Companies have been really slow to support SVG features in their browsers, and that is very saddening: 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:

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:
  - stackoverflow.com/questions/40156710/why-does-this-svg-image-have-a-height-of-150px
  - css-tricks.com/scale-svg
how to add na SVG image to a HTML file:
- svg/svg.html: external image. The included file is svg/svg.svg.
- svg/inline.html: inline.
svg/billion-laughs.svg
svg/html.svg
svg/triangle.svg
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:
- svg/style.svg: inline CSS
- svg/style-external.svg: external CSS with: <?xml-stylesheet type="text/css" href="svg.css" ?>, see also: stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css
  - 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?
- svg/current-color.html and svg/current-color.svg: illustrates fill="currentColor". Only works for inline SVG however... See also: stackoverflow.com/questions/13000682/how-do-i-have-an-svg-image-inherit-colors-from-the-html-document/13002311
JavaScript with SVG:
- svg/script.svg
- svg/external-js.svg
svg/defs.html hows how defs works
- svg/defs-external.html tries to include external defs from svg/defs.svg, but that fails like everything else related to external SVGs

Table of contents

SVG background color

0 0

This is a pain point as of SVG 1.1...

Examples at svg/background.html which answers from stackoverflow.com/questions/11293026/default-background-color-of-svg-root-element/11293812:

svg/background-rect.svg
svg/background-viewport-fill.svg: was part of SVG 1.2, but that whole standard got dropped. Not implemented neither in Chromium 85 nor Firefox 93 as of 2021.

This pain reflects directly on Inkscape: set SVG background color in Inkscape.

The major problem with SVG is text computer fonts. If you make an image with text that depends on one computer font and it is not present in the viewer's machine, it will use some other font, which may overlap with other elements of the image. Some libraries Matplotlib solve this by writing characters as curves, but this produces large files and unsearchable text. The inability of different computer platforms to standardize fonts that must always be present is a major issue.