Love to Hear From You! ×
Have any questions, feedback, bug to report? Is there something you'd want to see? Don't hesitate to reach out.
esc
Please type atleast two characters for search.

SVGBox v2

posted 1 month ago

You can sketch out your project in incredible detail, but in the world of software, you'll hit something you hadn't considered sooner or later. The trick is to anticipate that it'll happen and make sure that the transition is smooth for your end-users. More importantly, nothing should break for your existing users.

When I started SVGBox, the iconsets I had added needed only the fill color to be modified (e.g, the Material UI iconset). That's why there's a fill param. Then, I added an iconset that needed that based on strokes. My solution was that the fill could mean stroke in the context of the icon. But that is problematic for svg-loader method because it loads an icon via XHR, and then injects it into HTML. That means the user has to know whether the icon is fill or stroke to modify the color. Usually, this is not a problem because SVGBox gives you the correct code to use, but nonetheless, it adds to be complexity.

Then, I saw that few icons use gradients, which can't modified by either fill or stroke. Example:

<svg ...>
    <defs>
        <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="tail-spin_svg__a">
            <stop stop-color="#000" stop-opacity="0" offset="0%"/>
            <stop stop-color="#000" stop-opacity=".631" offset="63.146%"/>
            <stop stop-color="#000" offset="100%"/>
        </linearGradient>
    </defs>
    ...
</svg>

What was working till now doesn't anymore. The solution here is to use currentColor which basically can be inherited by child elements.

<svg color="red">
    <defs>
        <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="tail-spin_svg__a">
            <stop stop-color="currentColor" stop-opacity="0" offset="0%"/>
            <stop stop-color="currentColor" stop-opacity=".631" offset="63.146%"/>
            <stop stop-color="currentColor" offset="100%"/>
        </linearGradient>
    </defs>
    ...
</svg>

It made total sense for the fill/stroke problem, too. I can set currentColor for fill or stroke, so that only color attributes needs to be modified by the user. But the bummer was, it won't be compatible the existing API. I value backwards-compatibility in the sense that nothing should break for existing users. So, here's I solved it:

Existing users who were using s.svgbox.net URLs will work the same way with the same attributes. The new API will use s2.svgbox.net as the subdomain. It will use color attribute name, and will use the currentColor approach.

Hopefully, SVGBox won't be needing any other backward-incompatible changes. And if does, the framework to migrate works rock-solid.