Scalable Vector Graphics (SVG)

Tags: Good

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:

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:
- 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: https://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: https://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 | 378, 599, 9
- SVG tutorial | 0, 196, 2 | 🔗 link | nosplit | ↑ parent "Scalable Vector Graphics"
  - SVG background color | 93 | 🔗 link | nosplit | ↑ parent "SVG tutorial"
  - SVG fonts | 103 | 🔗 link | nosplit | ↑ parent "SVG tutorial"
- Join two SVG side-by-side from the command line | 13 | 🔗 link | nosplit | ↑ parent "Scalable Vector Graphics"
- SVG version | 0, 12, 4 | 🔗 link | nosplit | ↑ parent "Scalable Vector Graphics"
  - SVG 1.0 | 🔗 link | nosplit | ↑ parent "SVG version"
  - SVG 1.1 | 🔗 link | nosplit | ↑ parent "SVG version"
  - SVG 1.2 | 12 | 🔗 link | nosplit | ↑ parent "SVG version"
  - SVG 2 | 🔗 link | nosplit | ↑ parent "SVG version"

🔗

Ancestors

Vector graphics | 17, 616, 10
Image file format | 0, 965, 21
File format | 0, 2k, 58
Computer | 138, 31k, 741
Information technology | 0, 32k, 753
Technology | 0, 51k, 1k
Ciro Santilli's Homepage | 262, 237k, 4k

🔗

Incoming links

Good | 392