Support SVG dependencies (Both in .html and .svg)
Closed this issue · 19 comments
We handle icons on our site with an svg-sprite. Unfortunately this does not seem to work on the static web.
The icons are added to the page as svgs:
<svg class="icon icon-minus">
<use xlink:href="/assets/img/icons.svg#icon-minus"></use>
</svg>
On the static web that is generated the icons don't show up. When i inspect the html everything looks exactly the same as on the non-static website, so it seems that the generator doesn't handle these types of svg-icons.
Is it possible to add support for svg-sprites? Or do I need to find a different solution?
- Is this a SVG-element in HTML or do you want to add dependency support inside of svg files?
- I havn't deep dived into svg specification, is there any other tags/formats that you want to be supported in svg?
It is a svg-element in html. This example in particular is a button:
<button aria-expanded="true" aria-label="Visa sidor under utbildning">
<span>
<svg class="icon icon-minus" aria-hidden="true" focusable="false">
<use xlink:href="/assets/img/icons.svg#icon-minus"></use>
</svg>
</span>
</button>
Another example with description, in case that makes a difference:
<li>
<svg class="icon icon-text-document" role="img" focusable="false" aria-labelledby="i2694">
<desc id="i2694">Typ av anställning</desc>
<use xlink:href="/assets/img/icons.svg#icon-text-document"></use>
</svg>
<span>Tillsvidareanställning</span>
</li>
We compile all our svg-icons into one svg-sprite and then we use them in the html like the examples above.
Other than that we have some svg-logotypes, for example the logotype of the website, but those are added using img-elements.
@themaf I have started the work on my lunch but it is not quite done yet. It will probably be ready tonight.
Solution developed will make it possible for svg dependency both in html and for .svg file extension.
@themaf Can you please provide your icons.svg as example to make sure everything works as intended?
Can I also use it in the future for regression tests?
@7h3Rabbit Yes, that's ok. I've added the sprite to this comment, it is the big white block above. Hopefully you can just download it from there. If that doesn't work, let me know.
Thanks for making it possible to use your svg file and of course suggesting this improvement :)
Issue is now solved and I will close the issue.
@7h3Rabbit Thank you for your quick response. :)
@7h3Rabbit Hello again. We have downloaded the newest code but I am afraid that we still have issues with the icons.
When I run the scheduled job to generate the static web two svg-files are created for the icons for some reason. One is the icon sprite, the other is our 404-page. When this happens all of the icons on the static web reference the wrong file, the svg created from the 404-page, so no icons show up.
If I manually publish a page on the other hand, the icons on that specific page on the static web reference the correct svg file, the icon sprite, and the icons show up.
So there is something that happens in the scheduled job that generates a faulty svg and sets all the references to that faulty file.
@themaf It doesn't seem to be general error as this is what I get when running the scheduled job with the example I got:
From what you are writing I would guess one of below are the case.
Let me know if and how I can help you find the issue.
One of the pages using the icon svg file has url
What points to this is that one page that you randomly choose to manually publish works but it breaks when you run scheduled job.
Can you export the content and send it to me or in a test environment yourself start with full content and remove different page types until it works to find the issue?
Your code is different then examples
It could be that your examples are not accurate for what your actual content looks like
and that the difference in usage make our library work different then it should.
In the past we had an issue for example with not handling minified code correctly where all html was on one single row.
Can you give me more example markups to verify with? Preferably full page markup.
Your site is setup so it limits the number of request
Maybe your site has some kind of limit on number of request can be made in X seconds or similar?
@themaf
Please note that I use https://github.com/7h3Rabbit/EpiServerStaticWebExample as example website to test against (it is based on EpiServer Alloy).
You can find example markup I'm using for this in: https://github.com/7h3Rabbit/EpiServerStaticWebExample/blob/master/EpiserverAlloy/Views/ProductPage/Index.cshtml
Maybe that could help you/me find any issue
@themaf If you can run the code locally you could probably add content (text or markup) that is unique to 404 page and then listen to the AfterIOWrite event with a breakpoint to see when this happen.
@7h3Rabbit Sorry for the late reply, I have been quite busy with other things at work.
I have been debugging to try to figure out what is happening. When I run the scheduled job I can see that in EnsureUseTagSupport the group {/assets/img/icons.svg} is matched and the resourceUrl is replaced with the newResourceUrl to the correct svg-file. But then, for some reason, EnsureUseTagSupport matches the newResourceUrl as a group and replaces the url again, this time with the faulty url (the svg-file that contains the 404-page). And then it happens a third time, but this time the faulty url is matched and replaced with itself. Why this is happening I have no idea.
When I manually publish one page EnsureUseTagSupport only does the first part, matches the group {/assets/img/icons.svg} and replaces it with the correct newResourceUrl. That's why it works when I manually publish one page.
The examples I gave you are one real example and one theoretical based on our usage of icons on another site. The site we are building right now, and using this plugin for, is brand new. So right now, the only place on the entire site where the icon sprite is used is in a menu. The menu appears on several pages, but the code used is identical, so the url to the icon sprite is the exact same everywhere. The only difference is the # that denotes which icon is referenced, right now only #icon-plus and #icon-minus.
@7h3Rabbit Did anything in my previous comment help you find out what is happening?
@themaf Sadly no. I can't reproduce your problem. Are you sure you are using latest version from master branch?
Can you supply content of currentPageResourcePairs and replaceResourcePairs for when you enter the EnsureUseTagSupport function and also supply the content of the same variables later when come back to function EnsureDependencies on row var sbHtml = new StringBuilder(content);.
All this in class SvgDependencyService
@themaf If you can't supply them publicly, can you please verify yourself that your svg file is not in any of the variables before running EnsureUseTagSupport method.
When the scheduled job gets to the first page that uses the icon-sprite currentPageResourcePairs and replaceResourcePairs do not contain the key /assets/img/icons.svg. Efter they return from the EnsureUseTagSupport function they both contain the key /assets/img/icons.svg with the value /cache/v1/ROu.Lmh1toQ5ElhFyFnn1s35x217FRsqsIPQKIxkPVk_.svg.
When the scheduled job gets to the next page that uses the icon sprite currentPageResourcePairs does not contain the key /assets/img/icons.svg, but replaceResourcePairs does contain the key /assets/img/icons.svg with the value /cache/v1/ROu.Lmh1toQ5ElhFyFnn1s35x217FRsqsIPQKIxkPVk_.svg.
After they return from the EnsureUseTagSupport function however, currentPageResourcePairs still does not contain the key /assets/img/icons.svg, but now contains the key /cache/v1/ROu.Lmh1toQ5ElhFyFnn1s35x217FRsqsIPQKIxkPVk_.svg with the value /cache/v1/8XF4GUufXy1ZK1Zj58-NJSUnif0wvB0O.yH07MZvX.8_.svg. replaceResourcePairs contains both the key /assets/img/icons.svg with the value /cache/v1/ROu.Lmh1toQ5ElhFyFnn1s35x217FRsqsIPQKIxkPVk_.svg and the key /cache/v1/ROu.Lmh1toQ5ElhFyFnn1s35x217FRsqsIPQKIxkPVk_.svg with the value /cache/v1/8XF4GUufXy1ZK1Zj58-NJSUnif0wvB0O.yH07MZvX.8_.svg.
After seeing this I checked the first page that uses the icon-sprite that the scheduled job generated, and on that one page the icons use xlink:href="/cache/v1/ROu.Lmh1toQ5ElhFyFnn1s35x217FRsqsIPQKIxkPVk_.svg#icon-minus", and therefore work. On all other pages however, they get the faulty url xlink:href="/cache/v1/8XF4GUufXy1ZK1Zj58-NJSUnif0wvB0O.yH07MZvX.8_.svg#icon-minus" and don't work.
I never noticed that we have one page with working icons because, for some reason, the first page that uses icons that the scheduled job generates is a page that is several levels down. All the pages that you can get to directly from the start page get the broken icons.
So, to me it looks like the problem occurs when the icon sprite is used on more than one page. Have you tested this scenario?
This last description helped me.
I think I know what happens, it is probably again a result of your 404 page not returning HTTP StatusCode 404.
@themaf I can confirm that I can reproduce your bugreport when changing so 404 page is returning with HTTP StatusCode 200.
Now added logic to handle this scenario but you should really fix this 404 thing.