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.

Sign up for GitHub

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

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@fregante @shakyShane