Home/ Questions/Q 7898983
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T08:35:01+00:00

I am working with an SVG that is directly placed into an HTML file

  • 0

I am working with an SVG that is directly placed into an HTML file

<svg>
   Contents...
</svg>

Using javascript/jQuery I want to add an attribute to the SVG

$("svg").attr("viewBox", "0 0 166 361");

Here is the modified SVG after running the above script

<svg viewbox="0 0 166 361">
   Contents...
</svg>

notice it puts viewbox not viewBox. Since viewbox (lowercase) doesn’t do anything I need it to be viewBox (camelcase)

Any ideas?

** Update **

I ran a little test where I rendered the viewBox attribute from the server side, then I ran the script above. You can see that 1. When rendered from the server side, it is fine. 2. jQuery didn’t recognize the camelCase viewBox attribute and inserted another one in all lower case.

<svg version="1.1" id="Layer_1" x="0pt" y="0pt" width="332" 
     height="722" viewBox=" 0 0 100 100" viewbox="0 0 166 332">
...
</svg>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I might depend on your encoding document type. XHTML documents must use lower case for all HTML element and attribute names. I’m not sure about HTML.

    Update 2

    The only solution I could find is to use:

    $("svg")[0].setAttribute("viewBox", "0 0 166 361");

    Update

    I can’t explain it for any reason, I tested on my own host because JsFiddle always uses XHTML (boo!). In all cases it was lowercase, but it was still an SVG Element in FF, Chrome and IE9 (I don’t know if they were valid because I don’t know SVG I’m afraid).

    Firefox Example
    Chrome Example
    IE Example

    • 0