Home›Web›Tools› SVG viewer/editor. Enter file name: Code: View: SVG file viewer & editor online. Home ›Web›Tools› SVG.
I'm building an application that uses SVG paths, and I'd like to be able to see my paths rendered. Is there a site, say something like JSFiddle, on which you can paste in an SVG path, get it validated, and see it rendered?
EDIT: I've found that JSFiddle works fairly well for this, by selecting Raphael.js, svg.js, etc as a framework. e.g. http://jsfiddle.net/DFhUF/1393/
That's probably good enough for my needs, but it would be nice to know if there are other tools to help test and debug editing of SVG Paths.
Will113k4747 gold badges288288 silver badges375375 bronze badges
ericsocoericsoco11k1717 gold badges7474 silver badges103103 bronze badges
5 Answers
If you just want to quickly try out some SVG in your browser and not mess around with saving and loading files, jsFiddle is a great option.
Just use the following code as a template:
I created a sample to work from here.
jsFiddle also supports frameworks such as D3, PaperJs and Raphael from a dropdown on the left-hand side.
Drew NoakesDrew Noakes195k124124 gold badges537537 silver badges631631 bronze badges
A few places to test and tweak live:
4,84711 gold badge3131 silver badges4646 bronze badges
darcherdarcher1,63222 gold badges1616 silver badges2626 bronze badges
You can use my helper web-pagehttp://naiksoftware.github.io/svg.html
Nickolay SavchenkoNickolay Savchenko
I've created a site for this very pupose: http://svghelper.com/There you can past a SVG-path and play with it.I find it very helpfull to be able to see all the controlpoints etc! :-)
Paul WiegersPaul Wiegers
Edit: your update didn't show for some reason before I posted this ...
Paste your SVG path into a text file with a .svg name, and open it in a browser.Alternatively, create a small page like this
and open it in a browser (see the Primer). It assumes your SVG is in MySvgTest.svg
andy256andy2562,46822 gold badges99 silver badges1919 bronze badges
Not the answer you're looking for? Browse other questions tagged debuggingsvg or ask your own question.
Can anybody help me to convert .svg files to a font file? or is there a way to do it on the fly?
Shoaib Ud-DinShoaib Ud-Din3,91833 gold badges1717 silver badges2222 bronze badges
4 Answers
I found two relevant answers here on Stack Overflow:
Unfortunately, neither is really a coding answer, which is what I had really hoped for (a command line utility for scripted conversion or perhaps an API with which somebody could write such a thing).
Still, I got what I was looking for by combining those two answers.
Clean up SVG
(This step might be optional.) Open up your SVG in the free software program InkScape. Copy the existing SVG and create a new project from the FontForge Glyph template. Paste into that template, standardize the look, size, and position, and save as PLAIN SVG, one file per character ('glyph').
Convert SVG to font
Then, either use the free software program FontForge directly (as directed in the first answer, creating icon fonts with vector software) or else use the free IcoMoon online service (as directed in the second answer, tools to convert svg to ttf). I did the latter.
Using IcoMoon
IcoMoon is a rather straightforward tool. Click the purple Import Icons button on the top of the page to import each of your custom SVG glyphs. Then click 'Get Info' on the set's preferences so you can name the set and give it some metadata. Use the 'Edit' tool (the pencil icon) and click on each glyph to get the sizing and spacing just right.
When you're done, select all of the glyphs you want in the font and then press the 'Generate Font' button at the bottom of the page. On the resulting screen, you can then map each glyph to a unicode character. On the right side, you can type or paste a character, or on the left side, you can enter its hexadecimal code. A program like GNOME Character Map (for Linux) or Windows Character Map or Mac OS Character Palette may help you find appropriate codes for your glyphs.
Now press the 'Preferences' button at the top of the screen (or the gear at the bottom right) and finalize the name and metadata of your new font and press the 'Download' at the lower right. You'll get a Fontname.zip file that contains a bunch of usage suggestions as well as the font files themselves.
Iterate
I found the sizing and spacing was really hard to get right (I was making letters). I kept iterating on IcoMoon, installing the font, and comparing my letters to letters in a similar font (using a word processor). Sizing was easy to get right, but spacing was not so easy (and I wasn't even messing with ligatures or kerning!). Don't forget that some systems require flushing the font cache after installing a new font (on Linux, that's
fc-cache
from Fontconfig)Validate the font
You may also want to validate your font. Font Squirrel is an online service that lets you do that, offering corrections as well as usage tips. I think IcoMoon already does this, so perhaps that's only of use for FontForge creations.
Adam KatzAdam Katz6,64211 gold badge3737 silver badges5757 bronze badges
There are multiple online tools that allow you to upload SVG files and use those as icons for creating an icon font. Personally, I prefer the Icomoon App.
The Icomoon App allows you to do each of the following :
- Get one or more icons from several popular icon fonts
- Upload other fonts, which may be icon fonts but also regular fonts
- Upload SVG files to use as icons
- Combine any number of icons from any number of available fonts
- Set the UNICODE hex value for whichever characters you need
- Export and/or save the font set you create
29.7k1313 gold badges157157 silver badges135135 bronze badges
As others wrote, it is possible to import svg shapes into fontforge and some font designers work this way.
However, shapes (outlines) are only one part of a modern smart font, so that won't be sufficient in itself. You also need to work on metadata, kerning, hinting, etc. That's a lot of definitely not-fun, hard, but necessary stuff, while would-be font designers usually dream about ego-rewarding artistic drawing and not much else.
That's one reason svg fonts never caught up as a format, they're missing too many parts to be useful to render text.
nimnim
You can also try SVGtoFont. It provides all popular font format (woff, woff2,ttf and eot), css(SASS & LESS) and demo HTML File.
Sahil GuptaSahil Gupta
protected by Community♦Oct 10 '17 at 17:49
Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
Would you like to answer one of these unanswered questions instead?