0

Chrome is rendering my SVG incorrectly, so I'd like to serve Chrome a PNG instead. The SVG looks beautiful in other modern browsers, especially Mobile Safari on iOS where users are likely to pinch to zoom in - so everyone else gets an SVG, but Chrome gets a PNG. How can I do this?

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
Mentalist
  • 1,530
  • 1
  • 18
  • 32
  • this [link](https://www.google.com.au/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=css%20browser%20dependent%20style) ought to be a good place to start – gwillie Apr 07 '15 at 01:57
  • I'm curious what your SVG is that Chrome can't render it properly but other browsers can... – wavemode Apr 07 '15 at 01:57
  • @wavemode I debugged the SVG and it now renders fine on Chrome too. the problem was caused by a difference in how Chrome renders paths with a stroke thinner than 1px. I didn't need those strokes, so I deleted them all from the XML. That of course doesn't make this question any less valid since knowing how to serve browser-specific content with PHP is crazy useful. If you're curious, here's the code I changed (for all fills). USED TO BE: style="fill:#cdc4b9;stroke:#cdc4b9;stroke-width:0.25907141;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" NOW SHORTENED TO: style="fill:#cdc4b9;" – Mentalist Apr 07 '15 at 02:39

1 Answers1

1

Read the user agent string and serve the content conditionally:

<?php

if (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== false)
{
    ?>
        <img src="mycontent.png">
    <?php
} else {
    ?>
        <svg>mycontent</svg>
    <?php
}

?>
Community
  • 1
  • 1
wavemode
  • 2,076
  • 1
  • 19
  • 24
  • Thanks! It worked, but your code needs a ?> at the end to close the PHP. Add that and I'll accept it as the answer. (Don't want this little markup issue causing confusion for others) – Mentalist Apr 07 '15 at 02:28
  • actually, PHP doesn't require a closing tag. It's actually best practice to [not include one](http://stackoverflow.com/questions/4410704/why-would-one-omit-the-close-tag). – wavemode Apr 07 '15 at 15:29
  • Thanks for the additional detail there. All I know is I received the following error before I added the closing tag, and adding it resolved it: Parse error: syntax error, unexpected '<' in …filepath/test.php on line 24 The '<' on line 24 is a

    closing tag, so it went on to try to parse the HTML as PHP. Any ideas what else the fix for this would be, if closing the PHP is not the recommended solution? In any case I now consider this question answered, as I think our comments clarify sufficiently for any other readers who might have trouble. Cheers.

     – Mentalist Apr 08 '15 at 02:05
  • @Mentalist Oh dear, I should have clarified >.< As you can see in the code above, you do indeed need a closing tag to start writing plain HTML code. What I meant is that you don't need one at the very end of a file, but in retrospect this SVG obviously isn't the end of the file, so my mistake for causing that confusion. I added the closing tag. – wavemode Apr 08 '15 at 02:34