Disable inline Svg checking
mfanuzzi opened this issue · 4 comments
I'm getting the following error while my (Gatsby) site is building:
.....
8:59:55 AM: ✖ FAIL Failed loading inline Svg in public/somepath/index.html
8:59:55 AM: | operator: error
8:59:55 AM: | actual: inline Svg in public/somepath/index.html: about:blank:1:151: duplicate attribute: {http://www.w3.org/2000/xmlns/}xlink.
8:59:55 AM: ✖ FAIL Failed loading inline Svg in public/somepath/index.html
8:59:55 AM: | operator: error
8:59:55 AM: | actual: inline Svg in public/somepath/index.html: about:blank:1:151: duplicate attribute: {http://www.w3.org/2000/xmlns/}xlink.
8:59:55 AM: ✖ FAIL Failed loading inline Svg in public/somepath/index.html
8:59:55 AM: | operator: error
8:59:55 AM: | actual: inline Svg in public/somepath/index.html: about:blank:1:151: duplicate attribute: {http://www.w3.org/2000/xmlns/}xlink.
8:59:55 AM: 152 tests
8:59:55 AM: 1 skipped
8:59:55 AM: 149 passed
8:59:55 AM: 3 failed
As the message states, this is a page with some inline SVGs. Contrary to the message, there is not a duplicate xlink attribute, but no matter. I have tried disabling this with:
skipPatterns = ["duplicate attribute", "svg", "xmlns", "xlink", "sw.js"]
(that last one fixes a unrelated Gatsby v3-specific thing)
...but none of those work.
I think if I included public/somepath/index.html in the skipPatterns it would skip the whole page, but that is not what I want. Ideally, I just want the scope of the plugin limited to, say, a href="..." links and img src="..." and disable any other kind of checking. Failing that, I'd like to disable this specific check. It's not documented what the options for skipPatterns might be, so I may be missing something, but how can I do this?
Thank you!
Skip patterns is for skipping pre-defined tests. It uses a substring match on any of the properties of the test in question.
But what's failing here is not a test, but the loading of an asset. So I don't think you can disable it. I'd also like to keep the checks of inline SVG's, since that has actually caught bugs for people on numerous occasions.
But it feels like this might actually be a bug in checklinks, or at least a very bad error message for something that is actually a bug in your code.
Would you mind pasting a HTML snippet in here that recreates the problem? Since it's an inline SVG, it shouldn't be much more than just a dump of that page's HTML, or even just the SVG's in the page
Thank you for your prompt response! Here's the relevant snippet. I've shortened the content of the encoded image in the SVGs for brevity (yes, these should not be SVGs in the first place, but ignore that for now):
<div class="innerBox mont threes locations">
<h5>Blah blah blah</h5>
<div><svg width="222" height="222" alt="" viewBox="0 0 222 224" version="1.1">
<title>Map of Somewhere</title>
<defs>
<ellipse id="path-1-1" cx="111" cy="111.743872" rx="111" ry="111.5"></ellipse>
</defs>
<g id="lPage-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD-Copy-61" transform="translate(-279.000000, -3394.000000)">
<g id="Screen-Shot-2020-11-11-at-8.29.43-PM" transform="translate(279.000000, 3394.000000)">
<mask id="mask-1" fill="white">
<use xlink:href="#path-1-1"></use>
</mask>
<use id="Mask1" fill="#D8D8D8" xlink:href="#path-1-1"></use>
<image mask="url(#mask-1)" x="-81" y="-58.7561282" width="456" height="323"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABjcAAARiCAYAAADoYqVSAAAK3mlDQ1BJQ0MgUHJvZmlsZQAASImVlwdUU2kWx7/30kNCSUKkE3oTpBNASggtgIB0EJWQBBJKDAlBxY4MjmBFRATUER0QULACMhZEFNug2PuADCLKOliwobIPWMLM7Nnds/ec79zfubnf/e59533v/AMAOZwrkWTAqgBkirOlEQE+jLj4BAbud0AEOkAN6AF1Lk8mYYWHhwDEpvxf7cNdAI37W9bjtf799/9qFL5AxgMASkQ4mS/jZSLchqy3PIk0GwDUcSRutDhbMs73EaZJkQYRHhrn1AlGj9ehJU8ybSInKoKNsDkAeBKXK00FgOSIxBk5vFSkDikKYVsxXyRGOB9hT56Qy0e4A+GZmZmLxnkYYXMkXwIAWQNhZvKfaqb+pX6yoj6Xm6rgybkmDO8rkkkyuEv/z0fzvy0zQz51himySEJpYATitZDndz99UbCCxcmhYVMs4k/kT7BQHhg9xTwZO2GK+VzfYMXejNCQKU4R">
</image>
<circle id="Oval1" stroke="#00AEEF" mask="url(#mask-1)" cx="111" cy="112.243872" r="110.5">
</circle>
</g>
</g>
</g>
</svg><b>A Title</b><br />Somewhere</div>
<div><svg width="222" height="222" alt="" viewBox="0 0 222 223" version="1.1">
<title>Map of a place</title>
<defs>
<ellipse id="path-2-1" cx="111" cy="111.5" rx="111" ry="111.5"></ellipse>
</defs>
<g id="llPage-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD-Copy-62" transform="translate(-619.000000, -3395.000000)">
<g id="Group-2" transform="translate(619.000000, 3395.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-2-1"></use>
</mask>
<use id="Mask2-Copy" fill="#D8D8D8" xlink:href="#path-2-1"></use>
<image id="Screen-Shot-2020-11-11-at-8.36.58-PM" mask="url(#mask-2)" x="-33" y="-23" width="402"
height="267"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABrMAAARtCAYAAAD22r78AAAK3mlDQ1BJQ0MgUHJvZmlsZQAASImVlwdUU2kWx7/30kNCSUKkE3oTpBNASggtgIB0EJWQBBJKDAlBxY4MjmBFRATUER0QULACMhZEFNug2PuADCLKOliwobIPWMLM7Nnds/ec79zfubnf/e59533v/AMAOZwrkWTAqgBkirOlEQE+jLj4BAbud0AEOkAN6AF1Lk8mYYWHhwDEpvxf7cNdAI37W9bjtf799/9qFL5AxgMASkQ4mS/jZSLchqy3PIk0GwDUcSRutDhbMs73EaZJkQYRHhrn1AlGj9ehJU8ybSInKoKNsDkAeBKXK00FgOSIxBk5vFSkDikKYVsxXyRGOB9hT56Qy0e4A+GZmZmLxnkYYXMkXwIAWQNhZvKfaqb+pX6yoj6Xm6rgybkmDO8rkkkyuEv/z0fzvy0zQz51himySEJpYATitZDndz99UbCCxcmhYVMs4k/kT7BQHhg9xTwZO2GK+VzfYMXejNCQKU4R">
</image>
<circle id="Oval2" stroke="#00AEEF" mask="url(#mask-2)" cx="111" cy="111" r="110.5"></circle>
</g>
</g>
</g>
</svg><b>Another title</b><br />Somewhere</div>
<div><svg width="222" height="222" alt="" viewBox="0 0 222 223" version="1.1">
<title>Map of somewhere else</title>
<defs>
<circle id="path-3-1" cx="111" cy="111" r="111"></circle>
</defs>
<g id="lllPage-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD-Copy-63" transform="translate(-947.000000, -3394.000000)">
<g id="Screen-Shot-2020-11-11-at-8.30.50-PM" transform="translate(947.000000, 3394.756128)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-3-1"></use>
</mask>
<use id="Mask3" fill="#D8D8D8" xlink:href="#path-3-1"></use>
<image mask="url(#mask-3)" x="-64" y="-28" width="441" height="277"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQUAAAMnCAYAAACHtDQHAAAK3mlDQ1BJQ0MgUHJvZmlsZQAASImVlwdUU2kWx7/30kNCSUKkE3oTpBNASggtgIB0EJWQBBJKDAlBxY4MjmBFRATUER0QULACMhZEFNug2PuADCLKOliwobIPWMLM7Nnds/ec79zfubnf/e59533v/AMAOZwrkWTAqgBkirOlEQE+jLj4BAbud0AEOkAN6AF1Lk8mYYWHhwDEpvxf7cNdAI37W9bjtf799/9qFL5AxgMASkQ4mS/jZSLchqy3PIk0GwDUcS">
</image>
<circle id="Oval3" stroke="#00AEEF" mask="url(#mask-3)" cx="111" cy="111" r="110.5"></circle>
</g>
</g>
</g>
</svg><br /><b>Blah</b><br />Blah</div>
</div>I have confirmed that these are the cause of the problem; when I take them out, all tests pass successfully. I've made sure all IDs are unique, and the code validates at the w3c validator. My suspicion is that it has to do with the encoded image in those SVGs and their xlink:href, though the way they're being used here (to my knowledge) is valid.
There might actually be a bug in your code. Your svgs do not declare the xlinknamespace. And also xlink:href does not seem to be the way to go anymore: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
Do things work by just using href? If that works, I'd say we need to improve on our error messaging.
If xlink:href is actually required, try declaring the namespace: https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course#declaring_namespace_prefixes
If none of that works, it's a bug in our code for certain
Your svgs do not declare the
xlinknamespace.
Thanks for noticing that! They actually are declared in the SVG files, so some step of the build process must be stripping them out when inlining them. Though I suppose it doesn't matter, ultimately, because...
Do things work by just using href?
Yes they do!!
That's fantastic. I'm now going to be able to use your build plugin on this site in production, and will be trying it on our other sites as we get to them. Thank you for your great help here and making this plugin!