Gallery
The Encryption Template
Share
Explore
Gallery
The Encryption Template
DB

icon picker
SVG

Column Overview

Here’s some information about columns in the below table which may not be self-explanatory:
Format() Placeholders
Occasionally it’s useful to dynamically generate parts of an SVG. The easiest way to do so is using the Format() formula along with the numbered placeholders {1}, {2}, {3}, etc.
To use meaningful sample data for the Preview column, you can specify sample values for any placeholders by entering them into this column, comma-separating them.
Check out
@Sample SVG
⁠
for an example. Here, the text, color, font-family, and font-size are specified in Format() Placeholders, and the result is visible in the row’s Preview column.
Preview Height
Height in pixels to generate the image preview in the Preview column. Defaults to 80px.

SVG Images and Templates
Key
Description
SVG Code
Encoded
Format() Placeholders
Preview Height
Preview
1
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>
</svg>
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
2
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">
</animateTransform>

</circle>
</svg>
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
3
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"
viewBox="0 0 80 80">

<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"
stroke-width="2"
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"
stroke-width="2"/>

<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>
</g>

</svg>
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
4
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">
</svg>
data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%201%201"%3E%3C/svg%3E
​
80
There are no rows in this table
⁠

Gallery
Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.