SVG is one of my favorite web technologies. It’s a great way to make stylable, accessible, and interactive graphics. It’s not only human-readable, it’s easily programmatically modified using the DOM API, which lets you make data visualizations fairly easily (also check out d3.js).
Links
- The SVG specification
- https://www.w3.org/TR/SVG/
- MDN’s documentation
- https://developer.mozilla.org/en-US/docs/Web/SVG
Misc
textPath vertical and horizontal alignment and offsets
Just a note for myself since I couldn’t really google this. When you put text on a path, how do you shift its horizontal and vertical position?
You shift the horizontal position by putting a startOffset
attribute on the <textPath>
element (e.g. startOffset=50%
).
To move it in the vertical direction, you can set the dy
attribute of an internal <tspan>
element.
<text
xml:space="preserve"
x="1"
y="0"
dominant-baseline="hanging"><textPath
xlink:href="#somepath"
startOffset="50%"
><tspan
style="text-align:center;letter-spacing:0px;text-anchor:middle"
dy="10">This text is kinda moved off the path</tspan></textPath></text>
This is documented pretty well in the textPath attributes section of the SVG2 spec.
Filters
Text readability filter
This just adds a white blurred background behind text to make text easier to read when the background otherwise doesn’t have enough contrast.
<filter style="color-interpolation-filters:sRGB">
<feFlood flood-opacity="1" flood-color="rgb(255,255,255)" result="flood" />
<feMorphology in="SourceGraphic" operator="dilate" radius="1" result="result1" />
<feComposite in="flood" in2="result1" operator="in" result="composite1" />
<feGaussianBlur in="composite1" stdDeviation="1" result="blur" />
<feOffset dx="0" dy="0" result="offset" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="composite2" />
</filter>
Questions
Questions I have about SVG that I’ll try to figure out later
- If you have a
<foreignObject>
in a<use>
element, will it be properly duplicated?
Wishlist
Some features I hope SVG gains
- Mesh gradients
- Instead of just interpolating colors linearly, mesh gradients let you interpolate between several points on a polygon. This is a feature that appears (IIRC) in SVG 2. Inkscape (see my Inkscape notes) has support for this. However, when exporting Inkscape has to use a mesh gradient JavaScript polyfill that renders the mesh gradient to a bitmap canvas.