Tutorials:
https://www.w3schools.com/graphics/svg_intro.asp
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

<script>
    'xlink:href' attr is deprecated, just use 'href' now.
    Supports 'crossorigin' attr.
    'type' attr defaults to 'application/ecmascript'

Servers should send these headers for .svg files:
    Content-Type: image/svg+xml
    Vary: Accept-Encoding
And gzip-compressed .svgz files:
    Content-Type: image/svg+xml
    Content-Encoding: gzip
    Vary: Accept-Encoding

Coordinates and sizes that you write to viewBox are in real units,
you don't need to rount/truncate to integers.
This includes viewBox tag values.

CHROME 100% RENDER BEHAVIOR  ("bars" means scrollbars added when needed)
 viewPort DEFAULT or 100% + no viewBox
    HTML img cropped as if width="300 height="150" in native res., bars
    x.svg direct displays in native size and res. with no scroll bars
     Must resize browser!
 viewPort nums + no viewBox
    HTML img and x.svg direct render cropped to exactly that size
     in native res. (no stretching), bars
 viewPort DEFAULT or 100% + viewBox
    HTML img fills container, using scroll bars to preserve aspect ratio,
      completely ignoring preserveAspectRatio.
    x.svg direct fills container with default or specified preserveAspectRatio
      as if specified width/height of 1020x420.
      justification 'none' not supported.
 viewPort nums + viewBox
    Unless want cropping, always set viewBox to: 0 0 canvasW canvasH
    HTML img and x.svg direct at specified size and scale, bars.
    Widths and heights are not precisely as specified.
      Windows reduces from specified viewPart about 5%;
       viewBox is about 10% too big.

You work with a virtual SVG canvas with unlimited size.
ViewPort are the svg width and height settings, defaulting to 100%/100%
   and specifies size will actually render.
   No difference if specify number vs. num+px
   imagemagic incorrectly reports size as 300x150 if not specified or 100%.
viewBox specifies rectangle in the SVG canvas will be rendered
  Can ONLY specify plain nums.
  If ViewPort size > ViewBox size then canvas will be blown up.
  If ViewPort size < ViewBox size then canvas will be shrunk.
preserveAspectRatio may only be given if ViewBox is given specifies
 justification and aspect ratio.
  The default aspect ratio setting is what you will want, 'meet'
  which corresponds to background-size: contain.
  Could possibly want to change it to 'slice' (background-size: cover)
  if cropping is ok (but also check overflow property).
  Second part (justificaton) defaults to center-center: xMidYMid
  Can change like xMinYMin.

SAMPLE
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<svg version="1.1" baseProfile="full" width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

Unlike normal XML, sequence is essential, with lower entries overlaying higher
entries.

Position
top left is pixel (0,0)
Bare position numbers are "user units".
By default a user unit == pixel.
Absolute units (unit specified) are converted into user units automatically.

Root element
Can nest these to have a rectangle with different coord system or scaling.
<svg width="100" height="200" viewBox="0 0 100 100">
width and height are virtual canvas size, which you work with.
ViewBox is the portion visible to viewers which is scaled to display at the virtual canvas size.

Can specify id's like for HTML tags but don't know how would use these
(other than via Snap or svg.js or jQuery or for CSS styling).

g element is a general grouping element.

image tag embeds images

markers are arrow ends (tutorial says must be defined inside defs.
I don't yet know if that's an over-simplification).

path seems to be the only way to create curves, using 3 path commands:
Capitalization indicates whether other coords are ABS or rel to first coord.
    A/a arc: Segment of an ellipse.
    Q/q quadratic bezier.  A curve with a single pull.
    C/c cubic bezier.  A curve with 2 pulls.  Where s==start, e==end, 1=pull1:
        Mxs,ys Cx1,y1 x2,y2 xe,ye
d attribute is where the Drawing code is.
    Always start d command by Moving to start location with an M directive.

CSS can be used for painting and filling but not setting sizes, adding objects,
etc.
N.b. there are special CSS properties for shapes, text, gradient.
Beware that precedence is very different from HTML precedence.
    style sheet settings generally override more specific settings.
E.g. you set background color with "fill" property  not "background-color".
  http://tutorials.jenkov.com/svg/svg-and-css.html
  (n.b. jenkovs has obsolete usages like xlink:href).
    <rect... style="<CSS_CODE>"/>
OR
    <svg...>
      <defs><style type="text/css"><![CDATA[<CSS_CODE>]]></style></defs>
OR via separate *.css file
    <?xml-stylesheet type="text/css" href="style.css"?>

Consider https://anseki.github.io/leader-line/
for connector lines between objects.
https://anseki.github.io/plain-draggable/ dragging feature

JavaScript integration
http://snapsvg.io/ or https://svgjs.com/docs/3.0/ look like the best general JS toolboxes.
See ~/code-templates/svb/js.svg for vanilla embedded JS.
Extremely likely could do same, importing from a *.js file.
JQuery:  "doesn't officially support SVG"
    http://keith-wood.name/svg.html but seems dead project since jQuery 2.1 2014
    (as of 2020-10-11 jQuery is at 3.5.1)
    According to top answer at
     https://stackoverflow.com/questions/6793312/how-to-use-jquery-in-svg-scalable-vector-graphics ,
    to load jQuery from the SVG (a.o.t. from HTML), need an older jQuery like
     1.3.2 since newer "feature detect" breaks on SVG docs.
jQuery version


Libraries
http://snapsvg.io/ or https://svgjs.com/docs/3.0/ look like the best general JS toolboxes.
jQuery (with difficulties)
d3js.org
https://anseki.github.io/leader-line/
https://anseki.github.io/plain-draggable/

<svg/> with no tag attr of css size spec defaults to 300px x 150px.
Seems to make no difference whether you specify width and height by attr or css.

<img src="file.svg"/>
No scripts will run and no nested files will load.
Either the img tag or the sgv tag inside the svg file must specify an absolute
height.

Abnormalities
text y specifies BOTTOM of the text
text x depends on value of text-anchor, which defaults to start (normal).

To make really independently configurable copies of something, you must
clone them without svg language help.
Try out snap's clone function (presumably it does deep copying).
  Whereas snap.x() instantiates and appends to svg element,
    (subsequent snap.append(item) just MOVES the element).
  snapEl.clone() instantiates but doesn't append anywhere.
snapEl.remove() only removes element from DOM.  Can re-add it.

GROUPING ELEMENTS.  I think can style any of them and have it inherited.
svg        Has x, y; No translate; has preserveAspectRatio and viewBox
g          No x, y; Has translate; does not have preserveAspectRatio or viewBox
defs       Descendant elements are not added to graph (this el id + 'use').
           May contain:  any shape, g, symbol
           Groups multiple addressible elements.
           N.b. if going to clone, do snapEl.remove() instead of snapEl.toDefs()
symbol     Does not add anything to graph (requires 'use').  Define with id.
           The single grouping symbol itself is addressible.
           Has x, y; TRANSLATE? preserveAspectRation and viewBox
           May contain:  any shape, text, WHAT ELSE?
use        Insert any element by id into graph. Has x, y.
           <use xlink:href="#id" />
           Can instantiate (even multiple times) items defined in defs or as
           symbols.  Can also instantiate extra copies of any other element.
           Instantiations may be distinctively styled, and you can set attrs
           on the use that aren't set in the target.
           Can't override target attrs or add more nested elements.
           CAN NOT OVERRIDE with OR height ATTRS, at least for rects.
tref       Like use but can only refer to text elements for some damned reason.

tspan is for text spans internal to a <text>.
In addition to the absolute x and y, can also give character-specific relative dx and dy.
    E.g. I think 'dy="50,10,10,10"' would align letters vertically to origin by 50,60,70,80.

Snap
http://svg.dabbles.info/snaptut-transform
  (examples of shape instantiations, setting attrs, styles, cloning, transforms.
Snap CDN:  https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js
Data values may only be set or retrieved via snapEl.data().
    Can't access with .attr method; can't access by .data.X or data[x].
Drawing coordinates are viewBox coordinates.
snap.circle(xc, yc, r)
READ Object attributes:  obj.attr().ATTR
Set Object attributes:  obj.attr({ATTR: val});
Integer attr values like cx are strings :(.
snap.image("url", x0, y0, [w], [h]);