shapeCrafter
Jun 29 Updates
- Refactored the Braille Converter so it can accept longer strings and blocks of text.
- Braille Converter now uses text areas, plus now has a line character limit so longer strings of braille will get automatically wrapped without splitting words or groups of characters.
- Added the Braille Converter to the Home Page directly, so it can be accessed without having to open or start a new file. The Braille Converter still exists in the editor view.
shapeCrafter gives you a place to create hand-coded SVG graphics, render them instantly in the browser, and move directly to print or export.
Start a new SVG file, write or insert SVG elements, preview the rendered graphic while you work, and print or emboss your creation when it is ready.
Help and Getting Started
Create a file to generate the opening SVG code, including your filename in the title tag. The code editor accepts direct typing, or you can insert SVG primitives from the menu. You can also use the Quick Add keyboard shortcut to bring up a menu of shapes to add into your code when focused in the editor.
Use Live View from the Editor Settings for automatic rendering while you type, or keep Live View off and use Render SVG when you want to update the graphic manually. The Jump to Line button can move the cursor to a specific line in the code.
Saved files stay in this browser until you delete them. Download SVG creates a file on your computer, while Export Raster converts the current SVG into a bitmap image.
For embossing or tactile print workflows, choose Print/Emboss Graphic from the file actions menu so the browser prints only the rendered SVG.
Saved Files
Saved Files
No saved files yet.
| File | Actions |
|---|
Braille Converter
Open Braille Converter
Enter text, choose a UEB output grade, convert it to braille Unicode, and copy the result for use anywhere you need it.
Untitled
No file open.
Editor Settings
Live View updates the rendered graphic automatically a moment after you stop typing.
Adjust how long shapeCrafter waits before Live View updates the rendered graphic.
Play a success or error sound after pressing Render SVG while Live View is off.
Autosave keeps the current file saved in the browser while you work.
Adjust how many minutes shapeCrafter waits before autosaving your changes.
SVG Element Menu
Add SVG Elements
Choose a primitive to insert code at the current cursor position in the editor.
SVG Editor
Errors in SVG Code
Render View
Render Errors
Render View
Render the SVG to preview it here.
SVG Code Reference
SVG Code Reference
Expand the sections below for quick reminders while you code.
Rectangle Reference
Rectangle Summary
- x - Horizontal position of the rectangle.
- y - Vertical position of the rectangle.
- width - Width of the rectangle.
- height - Height of the rectangle.
- rx - Horizontal corner rounding.
- ry - Vertical corner rounding.
Circle Reference
Circle Summary
- cx - Horizontal position of the circle center.
- cy - Vertical position of the circle center.
- r - Radius of the circle.
Ellipse Reference
Ellipse Summary
- cx - Horizontal position of the ellipse center.
- cy - Vertical position of the ellipse center.
- rx - Horizontal radius of the ellipse.
- ry - Vertical radius of the ellipse.
Line Reference
Line Summary
- x1 - Horizontal position of the line start.
- y1 - Vertical position of the line start.
- x2 - Horizontal position of the line end.
- y2 - Vertical position of the line end.
Polyline Reference
Polyline Summary
- points - A list of x and y coordinate pairs for each connected point.
- fill - Usually set to none unless you want the open shape area filled.
Polygon Reference
Polygon Summary
- points - A list of x and y coordinate pairs for each point in the closed shape.
- fill - Fills the closed interior of the polygon.
Path Reference
Path Summary
- d - The drawing instructions for the path. This is where the path command letters and point values go.
- M - Move to a new absolute point.
- m - Move to a new relative point.
- L - Draw a line to an absolute point.
- l - Draw a line to a relative point.
- H - Draw a horizontal line to an absolute x position.
- h - Draw a horizontal line by a relative x amount.
- V - Draw a vertical line to an absolute y position.
- v - Draw a vertical line by a relative y amount.
- C - Draw a cubic bezier curve with absolute control points.
- c - Draw a cubic bezier curve with relative control points.
- S - Draw a smooth cubic bezier curve using an absolute point.
- s - Draw a smooth cubic bezier curve using a relative point.
- Q - Draw a quadratic bezier curve with an absolute control point.
- q - Draw a quadratic bezier curve with a relative control point.
- T - Draw a smooth quadratic curve to an absolute point.
- t - Draw a smooth quadratic curve to a relative point.
- A - Draw an arc using absolute values.
- a - Draw an arc using relative values.
- Z - Close the path back to its starting point.
- z - Close the path back to its starting point.
Text Reference
Text Summary
- x - Horizontal position of the text start.
- y - Vertical position of the text baseline.
- font-size - Size of the text.
- text-anchor - Alignment of the text such as start, middle, or end.
- content - The text that appears between the opening and closing text tags.
Fonts Reference
Fonts Summary
- Sans serif choices that work well across browsers: Arial, Helvetica, Verdana, Tahoma, Trebuchet MS, Segoe UI, and sans-serif.
- Serif choices that are widely available: Times New Roman, Georgia, Garamond, and serif.
- Monospace choices that are commonly available: Courier New, Consolas, Menlo, Monaco, and monospace.
- Braille29 font download: Braille29.ttf
- Braille36 US font download: Braille36_US.ttf
Example braille font-family value: font-family="Braille29, sans-serif"
Example standard font-family value: font-family="'Helvetica Neue', Arial, sans-serif"
Styling Reference
Styling Summary
- stroke - Color of the outline.
- stroke-width - Thickness of the outline.
- fill - Color inside a closed shape. Use none for no fill.
- stroke-dasharray - Pattern of dashes and gaps in the stroke.
- stroke-linejoin - Shape of corners where two stroke segments meet.
- stroke-linecap - Shape of the start and end of open strokes.
- opacity - Overall visibility level of the shape.
- fill-opacity - Visibility level of the fill only.
- stroke-opacity - Visibility level of the stroke only.
- class - Reusable styling hook for CSS classes.
- id - Unique styling or reference hook for one specific element.
Color
- Hex colors - Use values like #000000 for black, #ffffff for white, or #fdf5e6 for oldLace.
- RGB colors - Use values like rgb(0 0 0) for black or rgb(253 245 230) for oldLace.
- HSL colors - Use values like hsl(0 0% 0%) for black or hsl(39 85% 95%) for oldLace.
- Stroke color - Add a color value with stroke, such as stroke="#000000" or stroke="rgb(0 0 0)".
- Fill color - Add a color value with fill, such as fill="#fdf5e6" or fill="hsl(39 85% 95%)".
- Color keywords - You can also use named colors. See the CSS Extended Color Keyword list.
Transforms Reference
Transforms Summary
- transform - Attribute used to apply one or more transforms to an element or group.
- translate(x y) - Moves the element horizontally and vertically.
- scale(x y) - Scales the element larger or smaller.
- rotate(angle) - Rotates the element around its default center point.
- rotate(angle cx cy) - Rotates the element around a specified point.
- skewX(angle) - Slants the element horizontally.
- skewY(angle) - Slants the element vertically.
Gradients Reference
Gradients Summary
- linearGradient - Defines a straight-line color blend inside a defs section.
- x1, y1 - Starting point of the linear gradient.
- x2, y2 - Ending point of the linear gradient.
- radialGradient - Defines a circular color blend inside a defs section.
- cx, cy - Center point of the radial gradient.
- r - Radius of the radial gradient.
- stop - Defines a color stop inside the gradient.
- offset - Position of the stop within the gradient.
- stop-color - Color used at the stop.
- stop-opacity - Visibility level of the stop color.
- fill="url(#gradientName)" - Applies the gradient to a fill by referencing its id.
Advanced Reference
Advanced Summary
- g - Groups related shapes so they can share transforms, masks, clipping, or organization.
- use - Repeats an existing shape by referencing its id with href="#idName".
- defs - Stores reusable definitions such as gradients, clip paths, masks, or source shapes for use elements.
- class - Applies reusable styling to many shapes through CSS.
- id - Gives a unique name to one element so it can be referenced or styled directly.
- style - Stores CSS rules inside the SVG for classes, ids, and shared styling.
- desc - Adds a description to the SVG file or to an individual shape.
- title - Gives the SVG file or a described element an accessible name.
- comments - Use
<!-- comment -->to organize code or leave notes that do not render. - nested svg - Places one SVG inside another so a drawing can keep its own canvas space.
- clipPath - Creates a visible area that cuts away anything outside the clipping shape.
- mask - Uses white, black, and gray values to reveal or hide parts of shapes.
Braille Converter
Braille Converter
Enter text, choose a UEB output grade, convert it to braille Unicode, and copy the result into your SVG text code.
Render the SVG to preview it full screen.