Smaller files, scalable image size, and editability. Why would you use anything else for programmatically generated images?!?!
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
widthandheightproperties were not given, you get the default 300x150, which seems to be set in the SVG standard:
- if the
- 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=andheight=while keeping the coordinates of the drawing untouched. If theviewBoxaspect ratio differs from the width/height ratio, you likely want to play withpreserveAspectRatio, 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/defs.html hows how
defsworks- svg/defs-external.html tries to include external
defsfrom svg/defs.svg, but that fails like everything else related to external SVGs
- svg/defs-external.html tries to include external
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.
TODO:
Dropped in favor of SVG 2.
Articles by others on the same topic
There are currently no matching articles.