Modifying SVG images

I have previously written about the MishMash emblem and how I cropped it in a text editor. This was based on the fact that an SVG image is a “vector image” in which all elements are described programmatically. So what appears as an image on screen:

is, in fact, an XML file with information. Ever since I discovered this, I thought it could be fun to script changes to the SVG. However, when I opened the file to inspect the content, I quickly realised that it wasn’t as easy as that:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="50 210 480 370">
<g isolation="isolate">
    <g id="Layer_1" data-name="Layer 1">
    <path d="M354.572,394.288c0-51.293-25.447-96.638-64.402-124.113-38.955,27.475-64.402,72.82-64.402,124.113s25.447,96.638,64.402,124.113c38.955-27.475,64.402-72.82,64.402-124.113Z" fill="#363644" stroke="#363644" stroke-miterlimit="10" stroke-width=".5"/>
    <path d="M377.546,242.509c-32.532,0-62.669,10.24-87.376,27.665,38.955,27.475,64.402,72.82,64.402,124.113s-25.447,96.638-64.402,124.113c24.706,17.425,54.844,27.665,87.376,27.665,83.825,0,151.778-67.953,151.778-151.778s-67.953-151.778-151.778-151.778Z" fill="#c1f7ae" stroke="#363644" stroke-miterlimit="10" stroke-width=".5"/>
    <path d="M225.768,394.288c0-51.293,25.447-96.638,64.402-124.113-24.706-17.425-54.844-27.665-87.376-27.665-83.825,0-151.778,67.953-151.778,151.778s67.953,151.778,151.778,151.778c32.532,0,62.67-10.24,87.376-27.665-38.955-27.475-64.402-72.82-64.402-124.113Z" fill="#a7a1f4" mix-blend-mode="multiply" stroke="#363644" stroke-miterlimit="10" stroke-width=".5"/>
    <g>
        <path d="M261.023,217.931c-.089-.755-.453-1.342-1.089-1.76s-1.417-.626-2.341-.626c-.676,0-1.267.109-1.771.328-.504.219-.897.52-1.178.902s-.421.817-.421,1.305c0,.408.098.757.295,1.048.196.291.448.532.757.724.308.191.631.348.969.47.338.122.649.22.932.294l1.551.418c.398.104.841.249,1.331.433s.959.434,1.41.749c.45.316.821.72,1.115,1.212s.44,1.097.44,1.812c0,.825-.215,1.571-.645,2.237s-1.057,1.195-1.879,1.588-1.821.59-2.994.59c-1.094,0-2.04-.177-2.837-.53-.798-.353-1.424-.845-1.879-1.477-.455-.631-.712-1.364-.771-2.199h1.909c.05.576.245,1.053.585,1.428.341.376.773.654,1.298.835.524.182,1.09.272,1.696.272.706,0,1.34-.115,1.902-.347.562-.231,1.007-.555,1.335-.97s.492-.9.492-1.458c0-.507-.142-.919-.425-1.237-.283-.318-.656-.577-1.119-.775-.462-.199-.962-.373-1.499-.522l-1.879-.537c-1.193-.343-2.138-.832-2.834-1.469-.696-.637-1.044-1.47-1.044-2.498,0-.855.232-1.603.697-2.241s1.091-1.136,1.879-1.491c.788-.355,1.669-.533,2.644-.533.984,0,1.859.175,2.625.525s1.373.829,1.823,1.436c.45.606.687,1.295.712,2.065h-1.79Z" fill="#363644" stroke-width="0"/>
...

I imagine that this is because the designers exported from a professional program (Adobe Illustrator?) that creates such superfluous code. Too bad, it isn’t easy to work programmatically with this mess. However, before giving up, I decided to use AI to help.

Converting to SVG using ChatGPT

I tried loading the SVG file into ChatGPT, but it turns out it cannot read SVG files. Instead, I saved a version as a PNG file and uploaded it to ChatGPT. Loading and asking it to create an SVG worked remarkably well:

It managed to find the circles and text, but missed out on the colours and overlap. However, after some iterations, where I gave it the correct colour codes and asked explicitly to add the overlapping part in the middle, it ended up with something very similar to the original:

And for this one, the code is actually human-readable:

<svg width="420" height="320" viewBox="0 0 420 320"
    xmlns="http://www.w3.org/2000/svg">

<!-- Background -->
<rect width="100%" height="100%" fill="white"/>

    <!-- Left circle: Humans -->
    <!-- purple -->
    <circle cx="150" cy="160" r="110"
    fill="#A7A1F4"
    stroke="#777"
    stroke-width="1"/>

    <!-- Right circle: Machines -->
    <!-- green -->
    <circle cx="270" cy="160" r="110"
    fill="#C1F7AE"
    stroke="#777"
    stroke-width="1"/>

<!-- Overlap (darker center) -->
<!-- Draw the intersection of the two circles filled with the dark color -->
<defs>
    <clipPath id="clip-left-gpt" clipPathUnits="userSpaceOnUse">
    <circle cx="150" cy="160" r="110" />
    </clipPath>
</defs>
<circle cx="270" cy="160" r="110" fill="#363644" clip-path="url(#clip-left-gpt)" />

<!-- Labels -->
<!-- Top: Science -->
<text x="210" y="35"
        text-anchor="middle"
        font-family="Helvetica, Arial, sans-serif"
        font-size="20"
        fill="#333">
    Science
</text>

<!-- Bottom: Art -->
<text x="210" y="305"
        text-anchor="middle"
        font-family="Helvetica, Arial, sans-serif"
        font-size="20"
        fill="#333">
    Art
</text>

<!-- Left: Humans -->
<text x="90" y="165"
        text-anchor="middle"
        font-family="Helvetica, Arial, sans-serif"
        font-size="18"
        fill="#333">
    Humans
</text>

<!-- Right: Machines -->
<text x="330" y="165"
        text-anchor="middle"
        font-family="Helvetica, Arial, sans-serif"
        font-size="18"
        fill="#333">
    Machines
</text>

<!-- Center: MishMash -->
<text x="210" y="165"
        text-anchor="middle"
        font-family="Helvetica, Arial, sans-serif"
        font-size="18"
        fill="white">
    MishMash
</text>

</svg>

Creating an icon

One benefit of having a fully controllable SVG to start from, is that it is easy to remove the text from it by simply deleting the bottom part of the file:

From this, I created a small icon-sized image to use on the web page.

Playing with the colours

The reason I started the exploration into the SVG file was to see if I could add a dynamic version on the web page. There are many ways to doing this, but to begin with, I asked CoPilot to scramble the colours in the image for me, creating 5 alternative versions:

Based on this, it is possible to change randomly between the 6 versions based on mouse hovering:

<a href="/about/">
    <img src="/assets/images/bubbles/mishmash_bubbles.svg"
         alt="MishMash explores the meeting point of humans and machines with art and science"
         width="400"
         onmouseover="this.lastImage = this.lastImage ?? -1; let next; do { next = Math.floor(Math.random() * 5 + 2); } while (next === this.lastImage); this.lastImage = next; this.src='/assets/images/bubbles/mishmash_bubbles' + next + '.svg';"
         onmouseout="this.src='/assets/images/bubbles/mishmash_bubbles.svg';">
</a>

The end result shows up like this:

The next step will be to do some more dynamic effects, but that will be another day.