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.
Related
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!
I have Gray SVG icons next to each Menu item (inherited from another project) and displaied as background.
I need to show them black or white but I don't how to achieve this.
As backgrounds I can't use fill css property. I tried with filter:brightness(100) to make them white but I loose anti-aliasing (and analogue with filter:brightness(0) to make them black).
Mask has still serious compatibility issues (e.g. Firefox does not allow external svg).
I tried also to import them as data-uri with LESS feature, but it was unuseful, so.... any suggestion?
I have a black #000 page background on my web page.
Is there a way that I can change this with SVG to show a random effect of small #111 and #222 colored squares. I was told I could do this with SVG but I don't have any idea where to start. Even a really simple example would be a great help.
I'm looking for a solution for IE9+ browsers.
SVGs can be used as background images they same way that a PNG or JPG can. Create an SVG with any suitable editor - such as Inkscape - and include it the way you normally would.
background-image: url(../images/mybackground.svg);
World Map Images in Adobe Illustrator CS5
I have an image Map in illustrator CS5 which i want to save in GIF so as to reduce its size for web use. But when i save it, the map boundaries are having some white pixels all along the map boundaries of map.
I really dont know why has happened to it, but cant save it in Png-8, png-24 formate due to size constraint.
Any meaningful answer will be highly appreciate and thanks in advance.
Is your background a non-changable color? Maybe you can save the image with the same color as a background.
The problem is gifs don't support true transparency.
If this doesn't work can you provide the image you are trying to save (gif and png, I don't have AI right now)? Maybe there will be something I can do about the size or clearing the gif's edges.
transparent GIFs don't have an 8-bit alpha channel, like PNG does: a pixel in a GIF is either there, or it's not: if it's there, you can't see through it. This often means that an edge between transparent and non-transparent areas looks blocky.
There are two ways to deal with this... either use a PNG 24 (and the Illustrator Save for Web feature will help you to make it smaller), or in Illustrator create a background color layer behind your image before you export to GIF. If this background color layer is the same as the website you put the image on, the edges will blend nicely.
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.