SVG image file creation

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,

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

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

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.

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,

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

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.

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.

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

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.

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?

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

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.

Hello,

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

Best regards.

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

Hello Ricardo,

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

Best regards.