Scalable Vector Graphics
ID: scalable-vector-graphics
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
New to topics? Read the docs here!