I created a set of svg glyphs for a font I am building, in Inkscape.
They look fine in Inkscape, and fill the full canvas. But when I import them into FontForge, they appear tiny - around 1/10th of the size they should take up.
Can anyone explain why this is happening, and what I can do to fix it?
This happens because your artboard in inkscape has many more units than the font's cartesian grid space.
Open Inkscape
From the File menu, select Document Properties.
Set units to pixels (px) and document dimensions to 1000 x 1000, click OK
Set a horizontal guide at 200px
Draw a glyph – the hardest part! :-)
Save the drawing as an SVG
Open FontForge
From the File menu, select Import, chose SVG, find your drawing, click OK
Inkscape now has a template, 'FontForge Glyph' that should make this more convenient.
There are some bugs in the FontForge.This is a way to solve it.
Related
I have this UV map from my 3d object.
Now I want to export it to SVG format but I just need outlines/borders as SVG not all polylines.
Is it possible in Blender to export as SVG just outlines/borders or I need to do some manual work on Adobe Illustrator?
I don't have a direct solution, but I have found a quick work around in the open source vector software Inkscape. This has been incredibly useful for making patterns for foam and sewing, for cosplay.
Firstly, before exporting your UV maps, make sure all the UV's are seperated and don't touch/overlap. Then, export it to .svg.
Once in Inkscape, select it all with cntrl + A, then at the top click "Path" -> "Combine".
This will turn your UV's into a solid shape. On the panel to the right, click the X under "Fill", and with everything still selected, go to "Stroke Paint" and select "Flat colour". If you wish to adjust the stroke, such as the thickness, you can do so in "Stroke Styles".
Next, go back to "Path" at the top and click "Break apart."
As you can see, all the outlines remain and are broken into individual parts!
I have a SVG-file that has too much white space around it.
How do I get rid of this?
In tools like Photoshop, there's usually an easy cropping tool or some canvas resizing button under the Edit menu.
Go to Document Properties -> Resize page to content
Credit: https://inkscape.org/forums/questions/cropping-an-svg-file/
I've been using inkscape to create SVGs. But I've come across a problem. I've created a simple plus sign with a 1px line width (as simple as you can imagine). It is currently in PNG format with a transparent background. I've imported it into inkscape so I can convert it into a SVG. However, when I use trace bitmap, Inkscape CHANGES THE SHAPE such that the straight lines that are one pixel wide are tappered with pointed ends! I've tried different options in the trace bitmap settings but nothing seems to work. I've also gone through a number of online free conversion sites with no luck.
I wouldn't mind just creating the plus sign using html and css but the exact position of the lines as well as the line thickness tends to move around between chrome and firefox. It's very strange.
..Help?
I think I figured it out. If I create a plus sign that is 2 px thick instead of 1 px thick, inkscape does not do its smoothing thing (as long as I have unticked smoothing options). So, I do this, but draw it much bigger than what I need. Then when I load it into my website I can reduce the size of it there, and voila the 2 px width becomes 1 px width!
There is this site http://game-icons.net/ that offers huge number of open source icons. That is 1345 SVG files to this day. I would love to use them with a web project I am working on right now. The logical step is to transform them into an icon font. Normally, I would just upload them to https://icomoon.io/app/#/select/font and voila ... but!
The icons are inverse, white symbols on a black rectangle. I can invert colors in Illustrator, but some of the icons have overlaping shapes and this breaks them when icomoon tries to make them Black-transparent.
Example: http://game-icons.net/lorc/originals/archery-target.html
The circles are white, not transparent.
How to flatten a Black-White SVG file with overlaping shapes into an icomoon friendly Black-transparent SVG?
My wish is to make the font open source as well and send it back to the site admins for everybody to enjoy.
At the moment the icons have layers of black and white paths. You are going to need to use the "merge paths" feature of Illustrator or Inkscape to make the white (or black) paths into holes where appropriate. I think this is pretty much going to be a manual task. You could write a script to help with some of the work, but I suspect you would end up needing to fix a large number of the icons afterward anyway.
We have been provided with a Photoshop created specification for a website. It gives specific pixel-based panel widths and various font sizes for different items (in points).
For example, the text in a data grid is 12pt Verdana. The grid is 765px wide.
When rendered in a browser (Chrome or IE) at 100%, the grid is 765px as expected, but the font appears larger than the design (around 20-25% larger in the browser).
We suspected the DPI settings in Photoshop might be a cause, but if anything they should have had the opposite effect (Photoshop doc set to 72DPI, Windows/browsers rendering at 96DPI).
Any suggestions on what we are overlooking? Should the Photoshop file be authored at 96DPI?
Here is another discussion about pt vs px in photoshop and how you can change to px instead. Maybe it helps :)
https://stackoverflow.com/questions/3868627/photoshop-pt-size-conversion-to-web
Make sure your photoshop document is set to 72ppi, then it will match browser size
Under CS2 its a simple process of going into the Edit Menu -> Preferences Submenu -> Units and Rulers then change the units type to pixels.