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!
Related
I have a rich text label that works fine under a resolution of 1920x1080. However, when scaled down to the resolution on my laptop, which has a 1366x768 resolution, the text on said label becomes janky and malformed.
Some lines are cut off at the top or the bottom, and others are squished (as you can see in the image at lines 3, 6, and 13).
I'm using Godot v3.5.1 and the text font is Noto Sans Regular from here
I tried enabling mipmaps, using the filter, disabling anti aliasing, disabling font oversampling and enabling GPU pixel snap under Project Settings > Rendering > 2D > Snapping. And out of all of those, only the pixel snap setting worked. Completely fixes the issue and the text is rendered properly.
However, this completely breaks an animation of a spinning circle that plays at basically all times during the actual gameplay. It becomes stuttered and shakes instead of the normally smooth animation it has otherwise. I realize this may possibly be fixed by using SVG instead of PNG sprites, but I feel like that's not an ideal solution in case other sprites get added. Especially since my game will also allow community members to add their own sprites for their own game play.
So is there any way to fix the text without breaking the animations, or make it so that the animations don't break with pixel snap enabled?
I was trying to use a coloured texture (PNG 24/RGB) for a POI (bicycle_parking) and it was not being rendered. It was added properly as a texture, it just won't be rendered on the POI.
After some testing I came to believe that POIs only accept grayscale textures that can later be filled up with a color. Is this right?
I also found out that the icon needs to be of a specific size (I got it working only at 32x32 pixels and 512x512, but the scaling did not make it look good). Is there any information regarding this?
Now I have a grayscale icon (mostly white) but the fill color does not change the white as expected. This is as far as I got..
Here's a set of icons similar to the ones I need to render into POIs
How could I achieve adding this type of icons as the texture of a POI? Workarounds/hacks are welcome as well :)
Thanks!
The texture of the Poi must have a size that is a power of 2 and goes from 32x32 up until 512x512. Also make sure that the colour code of that image is RGB anything else wont work. For the best visual result you have to create 3 sets of pngs for different screen densities, for example see heatmap_legend.png then look at heatmap_legend#2x.png and heatmap_legend#3x.png, you can find them in the "common" folder.
So turns out that the color wasn't a problem after all. It was quite tricky to get one image working, but once I had the image working, adding color to it and saving the PNG worked just fine.
The problem with the image size I experienced is still happening. You need to export it in 32x32, 64x64 or 96x96 in order to StyleEditor not to crash when opening the file.
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.
I've placed an image on top of a div. I'm trying to blend the image into the div (The div is a solid color). In Google Chrome, it looks great! The colors blend perfectly. In IE 7, however, the colors show a hard line even though they should be the same color! After some examination (a print screen put into paint.net to check the actual RGB values), IE 7 is actually lightning up my image.
The blend has to look seamless. Google Chrome was fine with this thus far. Any ideas why IE 7 wont display the color right?
The two browsers are using different rendering engines. There are minor differences between them in how they render graphics, particularly jpegs.
The differences are minor but unavoidable.
Most of the time it goes unnoticed; it only makes an appearance in cases like yours when you try to position it against an element with a solid background colour that is supposed to be the same.
You may be able to resolve the issue by using a different image format. Try saving the image as a PNG. PNGs tend to be rendered more accurately between the browsers than jpegs, so that might be enough to solve your problem.
If that doesn't solve your problem, you could try using PNGs alpha transparency feature to produce an image with a fade to transparent at the edge, and then overlap the background colour behind it. This will definitely give you a smooth transition, but is a bit more technical, so harder to achieve. It will also give you problems with older versions of IE (IE6 for sure, I think you'll be okay with IE7), as they had some major bugs with PNG transparency. (If this is an issue for you, there are work-arounds for this; google IEPNGFix for more)
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.