Skip to content
New issue

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

#

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

Already on GitHub? # to your account

Jump to bottom

BS won't reload the page if an SVG is included via <iframe>, <object>, <svg> #444

Closed
fregante opened this issue Feb 12, 2015 · 5 comments · May be fixed by tobybellwood/govstrap#4 or GerHobbelt/browser-sync#15
Closed

BS won't reload the page if an SVG is included via <iframe>, <object>, <svg> #444

fregante opened this issue Feb 12, 2015 · 5 comments · May be fixed by tobybellwood/govstrap#4 or GerHobbelt/browser-sync#15

Comments

@fregante
Copy link

I was trying to get BS to live reload an SVG file, but it didn't work, so I embedded it in an HTML file via <iframe>, <object> and <svg><use>.

BS detects the SVG change but doesn't reload the page or the referenced file. The only tag that works is the <img> tag.

I'm running BS from CLI:

browser-sync start --server --logLevel debug --files "*.svg,*.html"

SVG from Wikipedia and this is the HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Included SVG reload test</title>
</head>
<body>

<!-- <img> is the only tag that will reload the page -->
<!-- <img src="un.svg" alt=""> -->

<iframe src="un.svg" frameborder="0"></iframe>

<svg><use xlink:href="un.svg#svg2"/></svg>

<object type="image/svg+xml" data="un.svg"></object>

</body>
</html>

Screencast (1.5MB)
@shakyShane
Copy link
Contributor

Thanks for the detail @bfred-it - I'm looking into it.

@shakyShane
Copy link
Contributor

What would be the IDEAL markup that you'd want to work with?

@fregante
Copy link
Author

Do you mean which one is more likely to be used? <svg><use> is definitely the most used, given this article. Then there's probably <object> and then <iframe> (unusual in this case)

@shakyShane
Copy link
Contributor

Ok, either way, in browser-sync@2.1.4 you can pass the flag no-inject-changes which will force all file changes to trigger a reload.

so you'll still need to embed it somehow in an html file, but when you modify the SVG file, it will simply reload the page

browser-sync start --server  --files="*.svg,*.html" --no-inject-changes

@fregante
Copy link
Author

I was hoping for a non-optional reload/injection like it happens with img's and non-SVG iframe's, but this could work

@dependabot-preview dependabot-preview bot mentioned this issue Mar 14, 2018
Open
@snyk-bot snyk-bot mentioned this issue Dec 14, 2020
Open
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@fregante @shakyShane