SVG height incorrectly calculated in Webkit browsers

Question

I have a issue specific to Webkit browsers (Safari & Chrome, on Mac & PC).

I\'m using Raphael JS to render SVG data and using a responsive layout to scale th

Answer 1

I had a similar problem for Safari. Case was that the svg width and height were rendered as dom element attributes (in my case width="588.75px" height="130px"). Defining width and height in css could not overwrite this dimension setting.

To fix this for Safari I removed the width and height information from the SVG file while keeping viewBox intact (you can edit .svg files with any text editor).

Git diff snippet of my .svg file:

    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 588.75 130"
-   height="130"
-   width="588.75"
    xml:space="preserve"
    version="1.1"