Ciro Santilli Represents image pixel by pixel, rather than by mathematical primitives such as done in vector graphics:
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.
It's pronounced GIF by Jehtt (2022)
. Source. 
A Jacquard loom in action by NationalMuseumsScotland (2016)
. Source. The lack of audio is unsettling!PNG reference implementation. Ahh, if feels good to have a dominating open source reference implementation.
Demo of using it by Ciro Santilli: stackoverflow.com/questions/1362945/how-to-decode-a-png-image-to-raw-bytes-from-c-code-with-libpng/36399711#36399711
It's not super easy to use at first.
And it sometimes says that the basic drawing thing you want to do is off the project's scope.
But as you learn more about it and further generalize the concepts, there are often reasonable reasons for those design choices.
And the UI looks good :-)
Examples:
- superuser.com/questions/167873/how-do-i-draw-a-box-in-gimp you need to go on a top menu to draw a rectangle
Some answers by Ciro Santilli:
Inkscape is a a good software for editing/creating SVG files.
Its functionality is fundamental for as a software for drawing geometry diagrams, as it is a good middle ground between algorithmic generation, and raster graphics.
At 1.0.2, its UI is a bit terrible:
- the way the menus open on the right with title below the window...
- several defaults are atrocious, e.g. export drawing rather than page
And it crashes from time to time on Ubuntu 21.04. And it has some glaring bugs, e.g.:
But still, it is a very good initiative.
What would be really amazing is if they had constraints: gitlab.com/inkscape/inbox/-/issues/1465 like proper CAD software, it would make it possible to not have to redo entire diagrams when you want to change a small part of them.
There's a tiny little crosshair that you can drag around to set the center of rotation.
And there's a button to make that crosshair snap: inkscape.org/forums/questions/can-a-pivotingtransfrom-crosshair-be-moved-and-made-to-snap-to-a-node-or-a-grid-point/#c14432
This is related to the underlying SVG pain point of SVG background color: