SVG image file creation

Avatar
Ricardo Pinto
  • updated
  • Under review

Hi,


I'm using some own icons or adapted ones in PNG, but I'm having some problems with SVG files.


I've tried to create an SVG icon on Corel Draw, and saved it in SVG format. I don't know the size to use, and as a vector file I've saved as it is.


When using it on bOS, either it doesn't show, or it shows huge, depending on the size. I sized down a little bit the icon and saved it again, but it's still very big or it shows in gray. Do I need to create a white and a black version, like the originals (normal and inverted color)?


Can you get me some sort of template, or any guidance to create the SVG files? I'm using PNG but I would prefer to use vector files. With preference for any guidance on how to create the normal and inverted SVG (I can invert the colors, but don't know how to gather them in a "readable" format for bOS).


Thanks

Replies 17
Avatar
0
ComfortClick ComfortClick

Hello Ricardo,


to be honest, i haven't dabbled into animated SVGs, but you're more then welcome to try :)


Best regards.

Avatar
0
Ricardo Pinto

Hello!


Thanks, we'll try it out.

Do you know, or have tried, how to do the same but with an animated SVG?


Best regards

Avatar
0
ComfortClick Support

Hello,

for any scaling issues try the following settings for .svg file.

Image 4618

Best regards.

Avatar
0
ComfortClick Support

Hello,

the way I was able to crate a custom image with both normal and fill option is to download one of our icons so the scale is there, play with it a bit, tweak and change it and then instead of export the icon, i saved it as .svg file..

For some reason, if i export it, I get both images in bOS... So let me know if simply save as .svg fixes the problem.

Best regards.

Avatar
0
Ricardo Pinto

Hello,

I still have the same problem also, I don't get to understand how the SVG black / white / filled / unfilled works.

I've tried with Adobe Illustrator, Inkscape, and I still don't get there.

I gave up for a while. Hopefully someone who knows how to get there, can tell us. It's a shame, because it would be cool to create new icons when we don't find one that fits.

Pleeeeease, give us some tip.

Best regards

Avatar
0
OgOg

any update on this topic of creating custom icons, as i still have this issue.

downloaded .svg from icon library. 

loaded into figma. 

change color of one thing. 

save back. 

it shows oversized in the bOS.

any tips how to make this work?

Avatar
1
ComfortClick Support

Hello,

thank you for reporting this issues, we've downloaded your SVG's and tested with same results. We are working on resolving this issue and you can expect a fix in our future updates.

Best regards.

Avatar
0
Jürgen Jürgenson


Hey,

I have made some svg bulb icons, the size seems to be correct now and the icon works well for one light. But if have more than one icon and I activate the first light the other icons will change color, this does not happen when i activate other lights. Can anyone tell me what am i doing wrong? 

Pic when first light is active.

Pic when other lights are active (This is how it should work) Here are the svg's i made Bulb off v2.svg
Bulb on v2.svg

Avatar
1
Guillem Morey

Hi everibody, I have had issues too with svg files, I use Inkscake, and is very important use a custom canvas size that defines the witdht and heigh of pic, other thing is how svg is defined by the software that you are using, important works with pixels, not mm, not cm or other. And almost cases I have replaced the svg header for an a working one.


width="512px" height="256px" viewBox="0 0 512 256" enable-background="new 0 0 512 256" xml:space="preserve">


Tip: bOS client don't show pics with animated svg tags or other special tags, with Chrome it works ;-)


Regards.

Avatar
0
ComfortClick Support

Hello,


this issue is pretty unusual for sure, we will do some research regarding these SVG files and do some testing, seems that the SVG's work on one version of illustrator but not on another version.


Regards.


Customer support portal powered by UserEcho