Sample SVG
Here’s just a sample SVG showing how Format() Placeholders works to generate a preview image. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 40"> <rect x="0" y="0" width="80" height="40" style="fill:MistyRose;" /> <text x="40" y="27" text-anchor="middle" fill="{2}" style="font-family:{3}; font-size:{4};">{1}</text> data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2080%2040"%3E%20%20%3Crect%20x="0"%20y="0"%20width="80"%20height="40"%20style="fill:MistyRose;"%20/%3E%20%20%3Ctext%20x="40"%20y="27"%20text-anchor="middle"%20fill="{2}"%20%20%20%20%20%20%20%20%20style="font-family:{3};%20font-size:{4};"%3E{1}%3C/text%3E%3C/svg%3E
Hello, PaleVioletRed, monospace, 24px
80
SVG Spinner
When Importing/Removing character sets, we display the action is “in progress” with a “spinner”.
The animation is handled within the SVG, using the <animateTransform> tag
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 -15 100 100" xml:space="preserve"> <circle cx="50" cy="50" fill="none" stroke="#999999" stroke-width="15" r="25" stroke-dasharray="100 50"> <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="0.5s" values="0 50 50;360 50 50" keyTimes="0;1"> data:image/svg+xml,%3Csvg%20version="1.1"%20xmlns="http://www.w3.org/2000/svg"%20%20%20%20%20%20viewBox="0%20-15%20100%20100"%20xml:space="preserve"%3E%20%20%20%20%3Ccircle%20cx="50"%20cy="50"%20fill="none"%20%20%20%20%20%20%20%20%20%20%20%20%20stroke="%23999999"%20stroke-width="15"%20r="25"%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-dasharray="100%2050"%3E%20%20%20%20%20%20%3CanimateTransform%20attributeName="transform"%20type="rotate"%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20repeatCount="indefinite"%20dur="0.5s"%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20values="0%2050%2050;360%2050%2050"%20keyTimes="0;1"%3E%20%20%20%20%20%20%3C/animateTransform%3E%20%20%20%20%3C/circle%3E%3C/svg%3E
100
SVG Key
During setup, the user can select the character sets they wish to include in their installation. Clicking the 👁🗨 button alongside each set displays a modal window with a list of each character included in the set. To format these nicely for display, the characters are displayed as “keys” using this SVG.
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" <line x1="65" x2="65" y1="59.158" y2="59.158" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/> <path fill="none" stroke="#000000" stroke-dasharray="0,3.9703" stroke-linecap="round" stroke-linejoin="round" d="M61.619,61.207C60.311,61.719,58.888,62,57.4,62H22.6c-2.28,0-4.406-0.659-6.199-1.798"/> <line x1="14.823" x2="14.823" y1="59" y2="59" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" <path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M14.823,59C12.475,56.873,11,53.797,11,50.376 V21.624C11,15.205,16.194,10,22.6,10h34.8C63.806,10,69,15.205,69,21.624v28.753c0,3.506-1.55,6.65-4,8.781"/> <path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M69,49.337v10.972C69,66.213,63.806,71,57.4,71 H22.6C16.194,71,11,66.213,11,60.309V49.337"/> <g xmlns="http://www.w3.org/2000/svg"> <text xmlns="http://www.w3.org/2000/svg" x="40" y="52" text-anchor="middle" fill="#000000" style="font-family:monospace; font-size:48px;">{1}</text> data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20fill="%23000000"%20%20%20%20%20%20viewBox="0%200%2080%2080"%3E%20%20%3Cline%20x1="65"%20x2="65"%20y1="59.158"%20y2="59.158"%20fill="none"%20%20%20%20%20%20%20%20stroke="%23000000"%20stroke-linecap="round"%20%20%20%20%20%20%20%20%20stroke-linejoin="round"%20stroke-width="2"/%3E%20%20%3Cpath%20fill="none"%20stroke="%23000000"%20stroke-dasharray="0,3.9703"%20%20%20%20%20%20%20%20%20stroke-linecap="round"%20stroke-linejoin="round"%20%20%20%20%20%20%20%20%20stroke-width="2"%20%20%20%20%20%20%20%20d="M61.619,61.207C60.311,61.719,58.888,62,57.4,62H22.6c-2.28,0-4.406-0.659-6.199-1.798"/%3E%20%20%3Cline%20x1="14.823"%20x2="14.823"%20y1="59"%20y2="59"%20fill="none"%20%20%20%20%20%20%20%20stroke="%23000000"%20stroke-linecap="round"%20stroke-linejoin="round"%20%20%20%20%20%20%20%20stroke-width="2"/%3E%20%20%3Cpath%20fill="none"%20stroke="%23000000"%20stroke-miterlimit="10"%20%20%20%20%20%20%20%20%20stroke-width="2"%20d="M14.823,59C12.475,56.873,11,53.797,11,50.376%20V21.624C11,15.205,16.194,10,22.6,10h34.8C63.806,10,69,15.205,69,21.624v28.753c0,3.506-1.55,6.65-4,8.781"/%3E%20%20%3Cpath%20fill="none"%20stroke="%23000000"%20stroke-miterlimit="10"%20%20%20%20%20%20%20%20%20stroke-width="2"%20d="M69,49.337v10.972C69,66.213,63.806,71,57.4,71%20H22.6C16.194,71,11,66.213,11,60.309V49.337"/%3E%20%20%3Cg%20xmlns="http://www.w3.org/2000/svg"%3E%20%20%20%20%3Ctext%20xmlns="http://www.w3.org/2000/svg"%20x="40"%20y="52"%20%20%20%20%20%20%20%20%20%20%20text-anchor="middle"%20fill="%23000000"%20%20%20%20%20%20%20%20%20%20%20style="font-family:monospace;%20font-size:48px;"%3E{1}%3C/text%3E%20%20%3C/g%3E%3C/svg%3E
↑
150
SVG Spacer GIF
Spacer GIFs are making a comeback! This time, in SVG form to save us from having to open another network request.
This is a 1px x 1px transparent image that I use in a few places to adjust layouts.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"> data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%201%201"%3E%3C/svg%3E
80