SVG Multi Color Support
Posted: Monday, March 9, 2020 3:26:20 PM
Hello Designers!

I am pleased to announce Zazzle has expanded our support of SVG file types by enabling you and your customers to change colors of the SVG image files in your designs.

First of all what is an SVG? SVGs are a vector based images that can be scaled up in size with no loss of fidelity. You could start with an SVG that works beautifully on a watch face, but then later add it to a shower curtain scaled to full shower curtain size and it would still look perfect. Why? Because SVGs, like all vector file types are math, not pixels. So, instead of your image file being a 2,000px by 2,000px image, it consists of a mathematical description of how to draw it, regardless of size. Here is a useful graphic showing how bitmap (pixel) versus vector images look when you make them bigger.

Well how do SVG files work now on Zazzle? If you add an SVG image type to a design it will look for the unique RGB color values in the file. If the SVG file has 5 or less unique RGB color values, we display a color picker for each of the unique color values so the user can change them. You can still upload SVGs with more than 5 colors to Zazzle but files with more than 5 unique RGB color values will not display any color pickers.

Note: Let us know if you think we should support more than 5 color pickers. We thought that would be enough for most use cases, but you guys are always pushing the design boundaries so tell us if you believe there is a need for more and why specifically you think that more are needed.

I created an example for you to mess around with. Here is my amazingly beautiful design that will probably take over the top spot on Zazzle for mugs Stick out tongue

If you click on that mug and go into the design tool you have the ability to change the unique color values. As you can see in the following image there are 5 distinct color values a user can change (if the image is unlocked when published). Also there is a convenient 'revert to original' link above the color pickers that will always revert to the colors that were set when the product was published.

This next image is an example of how a users color changes are applied to the image in the design.

If you decide to go to a published design, change the colors and use the short URL share option, the colors will persist for the the user who clicks on the shortened URL. Check it out!

A few notes from my interaction with this new capability.
1. Designs published before this change will not have the color changing ability.
2. Designs published since this change, using SVG images added to your library from before this change, will have this color changing ability.
3. You can turn off the color changing ability for newly posted designs by locking your SVG image layer in the design tool.
4. Gradients will only show one of the colors in the gradient so it's best not to use them as your uploaded design won't display a gradient.
5. All shapes in the SVG file with the same color will change when the color is changed. You can see an example in my mug design by changing color 1 which will change the outline of both my hair and beard as they have an equivalent RGB color.

We hope you enjoy this new feature on Zazzle. Let us know how you might want it improved by commenting on this official feedback forum post here.

Happy designing!

James C

Users browsing this topic

Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.
Print this topic
RSS Feed