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.

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

renderToString forces svg viewBox property to lowercase #6755

n1c opened this issue Sep 26, 2022 · 2 comments

renderToString forces svg viewBox property to lowercase #6755

n1c opened this issue Sep 26, 2022 · 2 comments


Copy link

n1c commented Sep 26, 2022

Vue version


Link to minimal reproduction

Steps to reproduce

npm install
node index.js

What is expected?

The template of <svg viewBox="0 0 10 10"></svg> is expected to render exactly as such.

What is actually happening?

Template is rendered as: <svg viewbox="0 0 10 10"></svg> ("viewbox" is now lowercase).

This breaks SVG's when used in an img tag. e.g. <img src="../../image.svg" />

MDN docs have the case as "viewBox":

System Info

    OS: macOS 12.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
    Memory: 16.78 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
    Node: 18.9.0 - /usr/local/bin/node
    npm: 8.19.2 - /usr/local/bin/npm
    Chrome: 105.0.5195.125
    Safari: 16.0
    vue: ^3.2.39 => 3.2.39

Any additional comments?

Bumped into this while working on

Specifically the svg's work great as a component, but cause issues when used as an image e.g. <img src="" />

Copy link

The bundlers are lowercasing keys they don't recognize:


By adding viewBox to the propsToAttrMap const in all the renderers, the toLowerCase() is skipped and you get the output you need:


If it were possible to extend that propsToAttrMap at runtime, this would be solvable, I reckon?

Copy link

n1c commented Sep 27, 2022

Much appreciated Evan 🙏

chrislone pushed a commit to chrislone/core that referenced this issue Feb 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

No branches or pull requests

3 participants