I have an online application that handles SVG's. It allows the users to drag and drop them and it also has a colour changing system so the user can change the colour of specific elements of the svg. The system will change each part of the SVG in sequence. So lets say I have the cherry here for example.

enter image description here

Currently the stalk is regarded as one piece which is perfect but the application picks up the two cherries separately so the user will have to change each cherry colour individually. If they were touching this wouldn't be a problem as it would be all the one shape/layer. In essence I'm basically asking is it possible to "join" "layers" of an SVG without them touching so they are picked up as one shape?

1 Answer 1


Yes it's possible in Illustrator. Select both cherries and do Object > Compound Path > Make.

enter image description here

When you export to SVG, both cheries will be one single path.


<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
<style type="text/css">
<path class="st0" d="M97.3,164c0.2,12.6-13.4,19.3-27.7,19.3s-30.5-3.3-28.8-22.9c2.3-25.3,26.7-19.2,28.8-13.4
    C71.4,141.4,96.9,134,97.3,164z M143.7,147c-2.1-5.8-26.5-11.9-28.8,13.4c-1.8,19.6,14.6,22.9,28.8,22.9c14.2,0,27.8-6.8,27.7-19.3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.