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 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. 

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
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,


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
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
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
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
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.

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


Customer support portal powered by UserEcho