SVGEditor

Free online SVG editor with live preview. Paste or upload SVG, preview it side-by-side, share a link or embed, and export to React, React Native, PNG, or Data URI. Runs entirely in the browser — no account required.

Live: https://getsvgeditor.com

Features

Live preview with zoom and canvas backgrounds
Paste, upload, or download SVG
Share link and iframe embed (payload in the URL, not on a server)
Export: React, React Native, PNG, Data URI
Client-side sanitizer for unsafe SVG before preview and share
Privacy Policy and Terms included

Run locally

From the project root (uses prebuilt *.min.js / styles.min.css):

npx --yes serve .

Or with Python:

Linux / macOS

python3 -m http.server 8000

Windows

python -m http.server 8000

Then open http://localhost:8000 (or the URL serve prints). Opening index.html as a file also works; share/embed are more reliable over http://localhost.

Build (after editing source JS/CSS)

./build.sh

Regenerates app.min.js, embed.min.js, styles.min.css, and fonts.min.css via esbuild.

Stack

HTML, CSS, and JavaScript. Fonts are self-hosted (woff2). LZ-String is vendored locally for share/embed links. Production pages load minified bundles.

License

MIT

Name		Name	Last commit message	Last commit date
blog		blog
fonts		fonts
scripts		scripts
vendor		vendor
.gitignore		.gitignore
404.html		404.html
LICENSE		LICENSE
README.md		README.md
_headers		_headers
_redirects		_redirects
add-viewbox-to-svg.html		add-viewbox-to-svg.html
animated-svg-text-gradient.html		animated-svg-text-gradient.html
app.min.js		app.min.js
apple-touch-icon.png		apple-touch-icon.png
batch-longtail-intents.js		batch-longtail-intents.js
build.sh		build.sh
calculate-svg-viewbox.html		calculate-svg-viewbox.html
center-svg-path.html		center-svg-path.html
change-inline-svg-stroke-color.html		change-inline-svg-stroke-color.html
change-svg-icon-stroke-color.html		change-svg-icon-stroke-color.html
change-svg-path-commands-to-lowercase-relative.html		change-svg-path-commands-to-lowercase-relative.html
change-svg-path-stroke-color.html		change-svg-path-stroke-color.html
change-svg-path-winding-order.html		change-svg-path-winding-order.html
change-svg-stroke-color-css.html		change-svg-stroke-color-css.html
change-svg-stroke-color-currentcolor.html		change-svg-stroke-color-currentcolor.html
change-svg-stroke-color-hover.html		change-svg-stroke-color-hover.html
change-svg-stroke-color-javascript.html		change-svg-stroke-color-javascript.html
change-svg-stroke-color-react.html		change-svg-stroke-color-react.html
change-svg-stroke-color-tailwind.html		change-svg-stroke-color-tailwind.html
change-svg-stroke-color-without-editing-svg.html		change-svg-stroke-color-without-editing-svg.html
change-svg-stroke-color.html		change-svg-stroke-color.html
change-svg-viewbox.html		change-svg-viewbox.html
clean-svg-file.html		clean-svg-file.html
compress-svg-path-data.html		compress-svg-path-data.html
convert-css-linear-gradient-to-svg.html		convert-css-linear-gradient-to-svg.html
convert-svg-absolute-to-relative-path-commands.html		convert-svg-absolute-to-relative-path-commands.html
convert-svg-css-classes-to-attributes.html		convert-svg-css-classes-to-attributes.html
convert-svg-fill-to-currentcolor.html		convert-svg-fill-to-currentcolor.html
convert-svg-icon-to-vue.html		convert-svg-icon-to-vue.html
convert-svg-inline-styles-to-presentation-attributes.html		convert-svg-inline-styles-to-presentation-attributes.html
convert-svg-presentation-attributes-to-inline-styles.html		convert-svg-presentation-attributes-to-inline-styles.html
convert-svg-relative-to-absolute-path-commands.html		convert-svg-relative-to-absolute-path-commands.html
convert-svg-to-base64-css.html		convert-svg-to-base64-css.html
convert-svg-to-base64-data-uri.html		convert-svg-to-base64-data-uri.html
convert-svg-to-base64-html.html		convert-svg-to-base64-html.html
convert-svg-to-base64-string.html		convert-svg-to-base64-string.html
crop-svg-canvas-online.html		crop-svg-canvas-online.html
crop-svg-online.html		crop-svg-online.html
crop-svg-to-circle.html		crop-svg-to-circle.html
crop-svg-to-custom-dimensions.html		crop-svg-to-custom-dimensions.html
crop-svg-to-selected-area.html		crop-svg-to-selected-area.html
crop-svg-to-specific-aspect-ratio.html		crop-svg-to-specific-aspect-ratio.html
crop-svg-to-square.html		crop-svg-to-square.html
crop-svg-without-changing-viewbox.html		crop-svg-without-changing-viewbox.html
css-to-svg-gradient-generator.html		css-to-svg-gradient-generator.html
custom-color-svg-text-gradient.html		custom-color-svg-text-gradient.html
custom-multi-color-svg-gradient-generator.html		custom-multi-color-svg-gradient-generator.html
embed.html		embed.html
embed.js		embed.js
embed.min.js		embed.min.js
export-css-gradient-as-svg.html		export-css-gradient-as-svg.html
extract-colors-from-svg-gradient.html		extract-colors-from-svg-gradient.html
extract-svg-gradient-stops.html		extract-svg-gradient-stops.html
favicon.svg		favicon.svg
fit-svg-to-viewbox.html		fit-svg-to-viewbox.html
fix-svg-viewbox-cropping.html		fix-svg-viewbox-cropping.html
fix-svg-viewbox-not-working.html		fix-svg-viewbox-not-working.html
fix-svg-viewbox.html		fix-svg-viewbox.html
flip-svg-horizontally.html		flip-svg-horizontally.html
flip-svg-path-horizontally.html		flip-svg-path-horizontally.html
flip-svg-path-vertically.html		flip-svg-path-vertically.html
flip-svg-vertically.html		flip-svg-vertically.html
fonts-mono.css		fonts-mono.css
fonts-mono.min.css		fonts-mono.min.css
fonts-syne.css		fonts-syne.css
fonts-syne.min.css		fonts-syne.min.css
fonts.css		fonts.css
fonts.min.css		fonts.min.css
gtag-config.js		gtag-config.js
index.html		index.html
invert-svg-gradient-colors.html		invert-svg-gradient-colors.html
invert-svg-gradient-direction.html		invert-svg-gradient-direction.html
make-svg-background-transparent.html		make-svg-background-transparent.html
mirror-svg-horizontally.html		mirror-svg-horizontally.html
mirror-svg-path-horizontally.html		mirror-svg-path-horizontally.html
mirror-svg-path-vertically.html		mirror-svg-path-vertically.html
mirror-svg-vertically.html		mirror-svg-vertically.html
multi-color-svg-background-gradient-generator.html		multi-color-svg-background-gradient-generator.html
multi-color-svg-gradient-generator.html		multi-color-svg-gradient-generator.html
multi-color-svg-linear-gradient-generator.html		multi-color-svg-linear-gradient-generator.html
multi-color-svg-radial-gradient-generator.html		multi-color-svg-radial-gradient-generator.html
neon-svg-text-gradient.html		neon-svg-text-gradient.html
netlify.toml		netlify.toml
og-image.jpg		og-image.jpg
optimize-svg-file.html		optimize-svg-file.html
privacy.html		privacy.html
reduce-svg-file-size.html		reduce-svg-file-size.html
reduce-svg-path-nodes-online.html		reduce-svg-path-nodes-online.html
remove-background-color-from-svg.html		remove-background-color-from-svg.html
remove-background-from-svg.html		remove-background-from-svg.html

Navigation Menu

Repository files navigation

SVGEditor

Features

Run locally

Build (after editing source JS/CSS)

Stack

License

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

SVGEditor

Features

Run locally

Build (after editing source JS/CSS)

Stack

License

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages