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
Ricardo Pinto

Hi,


I use PNG a lot, but they are not perfect for free resizing, so that's the only reason I wanted to try the SVG files. I have experience with vector work, so it should be piece of cake...


I've tried something different for comparison, and some weird stuff happened:


I took a sample file from the bOS gallery, to use as template, and opened it on Adobe Illustrator.


I found a sample of a desk lamp, with both versions, filled and unfilled. So I deleted the original images, replaced them with the new ones, and save it as demo1.svg


Then with the original bOS sample, I made two simple circles, one filled one unfilled. Saved it as demo2.svg


On a panel with several buttons, I've placed demo1.svg on a button. IT WORKED!


But wait...


On the same panel, I've placed demo2.svg in a different button for comparison.


The first one messed up completely, it was now showing in black instead of white, full of pixels, completely weird.


The second, was showing in black, instead of white...


Man... what a tricky stuff! Can't say what's wrong...


Best regards

Avatar
0
Fabien Fuster

Hello,


Issue is not with scaling. I can load any png, jpg or even svg pictures. The scaling of the png and jpg works like a charm.


The issue is linked to the svg files. We try to create a fillied unfilled image and use it. Getting the image and loading it result always with both image shown at the same time, side by side like in Adobe Illustrator. I don't get only one visible as the original svg file.


Reading Ricardo's comment, I guess he experience the same issue (@Ricardo, correct me if I'm wrong making this statement).


Therefore the question : any specs to respec while creating the file ? Any tip to get the user created file working the same way as your orginal ones such as  changing between filled / unfilled based on status or back color ? Maybe a small tutorial ?


Regards,

Avatar
0
ComfortClick Support

Hello,


when you added the new icons for your devices, did you select current icon and replaced it? You can try going into your files folder, Images (in Configurator) click Add and select image file and try adding new icon. Also try adding a simple .png picture. Currently testing .png images in my configurator and scaling works without issues.


Best regards.

Avatar
0
Ricardo Pinto

Hi,


Well, it looks like I'm not the only one struggling with the SVG files, yay! :-)


I do have experience with vector work, but I'm also having the same trouble as Fabien.


I can't manage to get it working, either with Corel Draw or Adobe Illustrator... I took a sample from bOS, and even used the same file, just deleted the content and tried to use my "filled" and "unfilled" images. And I was not able to get a good result. In my best result I ended up with two images showing on bOS, and none of them was actually resized lol.


Do we need to change anything particularly?


Tips are welcome!


Thanks

Avatar
0
Fabien Fuster
Quote from ComfortClick Support

Hello,


you can try and download one of our icons and use it as a template in your program and yes, you will need to create a normal and inverted color (use the same program that provides this).

Also note that your work on our forum page doesn't get unnoticed and is highly appreciated, helping us and our clients with well constructed and helpful tips and suggestions that benefits everyone in our community.


Thank you and best regards. 

Hello,


Obviously, I'm practising Adobe illustrator since a little while now to achive the same goal a Ricardo. I start to manage the way to vectorize pictures now, however, I'm struggling to get them together in a way that bOS understand it is the same one (filled / unfilled).


Any tip for that reach that step would be welcome. Also, any specific image size to work on ?


Regards,

Avatar
0
Ricardo Pinto

Hi,


I've tried that... I took a file of yours, and tried to reproduce the SVG file with my drawings. But it's still messed up.


I think thay my Corel Draw X7 is somehow not saving it properly, or I'm doing something wrong with the layers, because it shows the two images on the icon. And it doesn't show in white. I'll try to get Adobe Illustrator to see how it goes...


Well thank you very much. I'm glad that my contribution is appreciated. I'm actually a professional system integrator, but while helping or suggesting to others, I also learn something new. And by learning, I also discover new things to use in my bOS. So it's a win-win.


Thank you

Avatar
0
ComfortClick Support
  • Under review

Hello,


you can try and download one of our icons and use it as a template in your program and yes, you will need to create a normal and inverted color (use the same program that provides this).

Also note that your work on our forum page doesn't get unnoticed and is highly appreciated, helping us and our clients with well constructed and helpful tips and suggestions that benefits everyone in our community.


Thank you and best regards. 


Customer support portal powered by UserEcho