Vue stripping out styles from inline SVG

Version

2.6.11

Reproduction link

https://jsbin.com/lurayuxofo/edit?html,js,console,output

Steps to reproduce

• Include inline SVG with some styles within a Vue instance
• Init vue instance

What is expected?

SVG to be styled according to the style element

What is actually happening?

Vue is giving a warning "[Vue warn]: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>. " and also stripping the style element so the SVG is appearing with no style.

---

I am opening the exact same issue as this one because it’s been ignored and this should be fixed by now.

It’s been plaguing vue since 2016.

The fix so far:

In the meantime, this can be fixed by adding this attribute xmlns:svg="http://www.w3.org/2000/svg" to your <svg> tag and writing your style as this : <svg:style type="text/css">

[JessicaSachs]

Thanks for the response.

I only care about this issue being acknowledged as a real one and re-opened – not to imply any scheduling or priority.

My comment is only accounting for what was said initially: allowing style tags inside svg.

This is notably the case with generated classes inside .svg files: copying the svg content into a component and leaving the style tag will override existing classes and change existing svgs because of generated classes for different SVG sharing the same name.

@posva I was trying to address your concern RE: namespace risk, so I brought up SVGO + loaders.

If there is a webpack loader involved, it will be the loader’s job to automate any process to avoid inlining style.

You mentioned that the loader can handle this. I agree, this is a good stop-gap. However, if loaders are the final solution, we will diverge from the SVG spec, but only in SFC-compiled components… not template-compiled ones. Keeping template-compiled markup equivalent to Vue SFCs seems like it would be a requirement.

@Justineo I think a webpack-loader approach is possible and an OK near-term solution for many users. Using the prefixIds plugin for SVGO would work to generate unique ids.

Again, I would love this feature to be in the core Vue compiler due to the template-compilation issue outlined above. We seem to be interested in diversifying our build stack from Webpack so if we choose a loader-based solution, this issue may become more apparent as time goes on.

Vue just shouldn’t strip style tags in SVG. It’s against spec, we should figure out a solution

[JessicaSachs]

I would really like to see better support for SVGs in the Vue ecosystem. I struggled with issues (like style tags getting stripped) when implementing our icon system at work. I implemented svgo-loader + vue-svg-loader to generate uniquely prefixed selectors for the style tags. Here’s the prefixIds PR for SVGO which adds that functionality.

@posva The main issue with this solution is that not all styles can be inlined. You can’t do anything with pseudo selectors or at-rules (media queries, feature detection). This means that implementing an icon system with interactive svgs becomes very difficult. You can pull out the svg into a v-html but that kind of defeats the purpose of componetizing the SVG in the first place.

SVGO is also available as a webpack loader so I think implementing this inside of vue-cli could be doable and alleviate the namespacing concerns