Colors are not differentiated for SVGs created in vectr.com


#1

I am trying to use design tools that student can use on their chromebooks. vectr.com is a really great app, but objects drawn in different colors in vectr.com do not get separated in the GFUI.

This is an example of the file that I created in vectr. Any ideas why this is the case? This is not the case when I do the same test in inkscape.

untitled


#2

Your file acted the same for me putting it straight into the UI. Going into Illustrator and resaving it as a SVG (with no other changes) allowed it to load as one would expect (separate operations for the colors).

Looking at and comparing the SVG code between the two, the original is invoking the “use xlink:href” to reference back to the previously defined path IDs.

According to the SVG standards: Deprecated since SVG 2
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

A good chance that may be the case here?


#3

Thanks! So, it appears to be an issue with how vectr is creating the SVG file itself? I opened it up in inkscape and re-saved, but that didn’t seem to fix the problem. I copy & pasted the objects and still same problem. Lastly, I created an object and made it the same color as one of others - this one shows up as a separate color / object in GFUI.

Should I report this as an issue to the developers at vectr?

untitled


#4

If you want to create an engrave, don’t use the stroke too. The stroke will default to a cut, overriding the engrave.

For cuts and scores, use unfilled shapes with a stroke color. (Different colors for separate operations.)

For engraves, use no stroke. (Null stroke. Different fill colors for different engrave operations.)

Explanation for how the GFUI interprets what it sees in this writeup:


#5

Thanks @Jules. This is an amazing resource!

I tried changing the SVG to no stroke and different fill colors. GFUI is still recognizing these as the same engrave operation even though the two shapes are different colors.

I’ll keep playing around with this. It’s not a show-stopper – I can have students export objects separately they want to have for different operations. They’ll just have to re-align the objects when they bring it into GFUI.


#6

That is odd. I’m not familiar with the Vectr program though, maybe there is something going on in it that’s a bit wonky.

Had you thought about having your students use Inkscape? It’s free and the interface is designed to deal with the output directly. (Might be less work overall for the students.)


#7

Possibly. I can’t say for sure one way or the other. I’m not a ton the computer at the moment but what happens if you run one of those files through a SVG cleaner like

http://www.svgminify.com/


#8

I’m sorry your file isn’t uploading the way you expect.

Unfortunately, I’m not an expert in using vectr.com. Since our team is better versed in Illustrator or Inkscape, would you try one of those like @Jules suggested?

I’ll pass on the feedback about this file.

Happy printing!


#9