Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CssUrlProcessor breaks SVG data URIs #151

Closed
PhyxionNL opened this issue Apr 26, 2022 · 1 comment
Closed

CssUrlProcessor breaks SVG data URIs #151

PhyxionNL opened this issue Apr 26, 2022 · 1 comment
Labels
Milestone

Comments

@PhyxionNL
Copy link
Contributor

Consider the following SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1440" height="560" preserveAspectRatio="none" viewBox="0 0 1440 560">
    <g mask="url(#SvgMask)" fill="none">
        <rect width="1440" height="560" x="0" y="0" fill="#0e2a47"></rect>
        <path d="M0,299.673C72.712,301.383,144.361,356.897,211.698,329.408C280.324,301.393,325.188,229.231,346.476,158.23C366.61,91.077,336.011,22.497,324.451,-46.649C313.194,-113.982,329.935,-196.173,279.527,-242.212C228.756,-288.582,146.593,-255.806,79.411,-270.449C18.745,-283.672,-33.04,-325.944,-95.095,-323.865C-167.503,-321.439,-244.89,-307.587,-297.54,-257.82C-351.753,-206.576,-388.79,-128.697,-379.932,-54.626C-371.355,17.099,-283.43,50.028,-252.897,115.494C-222.761,180.11,-263.03,277.629,-205.396,319.602C-148.643,360.934,-70.19,298.023,0,299.673" fill="#0b2239"></path>
        <path d="M1440 918.348C1518.302 928.518 1598.121 948.7950000000001 1672.066 921.102 1754.284 890.3109999999999 1844.909 840.677 1871.125 756.888 1897.3809999999999 672.97 1811.973 595.333 1801.3020000000001 508.053 1790.275 417.863 1865.944 311.11199999999997 1808.061 241.07299999999998 1750.532 171.462 1636.261 200.72000000000003 1545.97 199.098 1476.288 197.846 1409.833 210.13400000000001 1343.906 232.735 1280.63 254.42700000000002 1225.146 287.336 1171.609 327.438 1104.7559999999999 377.514 1012.5889999999999 414.549 992.8340000000001 495.707 973.102 576.771 1027.513 657.944 1074.353 726.986 1116.136 788.5740000000001 1177.749 830.956 1243.689 865.466 1304.974 897.54 1371.405 909.4390000000001 1440 918.348" fill="#113255"></path>
    </g>
    <defs>
        <mask id="SvgMask">
            <rect width="1440" height="560" fill="#ffffff"></rect>
        </mask>
    </defs>
</svg>

If you insert this in a background-image for example as url("data:image/svg+xml, encoded SVG);, the #SvgMask is replaced with the path the CSS is located in, e.g., /path/to/css#SvgMask. This breaks the SVG as it should keep its reference, i.e. #SvgMask. Within SVGs, ids shouldn't be replaced.

@PhyxionNL
Copy link
Contributor Author

If you encode the SVG, it's %23 instead of '#', which isn't checked by the regex. I'll whip up a PR.

@PhyxionNL PhyxionNL mentioned this issue Apr 26, 2022
Shazwazza added a commit that referenced this issue May 4, 2022
@Shazwazza Shazwazza added the bug label May 4, 2022
@Shazwazza Shazwazza added this to the 4.1.0 milestone May 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants