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

Closed
n1c opened this issue Sep 26, 2022 · 2 comments
Closed

renderToString forces svg viewBox property to lowercase #6755

n1c opened this issue Sep 26, 2022 · 2 comments

Comments

@n1c
Copy link

n1c commented Sep 26, 2022

Vue version

3.2.39

Link to minimal reproduction

https://github.com/n1c/vue-renderToString-lowercase-props

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": https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

System Info

System:
    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
  Binaries:
    Node: 18.9.0 - /usr/local/bin/node
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Safari: 16.0
  npmPackages:
    vue: ^3.2.39 => 3.2.39

Any additional comments?

Bumped into this while working on https://vue3-avataaars.com/

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

@woganmay
Copy link

The bundlers are lowercasing keys they don't recognize:

image

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

image

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

@n1c
Copy link
Author

n1c commented Sep 27, 2022

Much appreciated Evan 🙏

chrislone pushed a commit to chrislone/core that referenced this issue Feb 4, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Sep 21, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants