Loading ...
Sorry, an error occurred while loading the content.

Re: Problem viewing SVG (in HTML) on Safari

Expand Messages
  • helen_volos
    Sujana s suggestion did not work for me either. I managed to get around the problem but placing the svg in an svg file (mysvg.svg) and then including it in my
    Message 1 of 6 , Apr 16, 2011
    • 0 Attachment
      Sujana's suggestion did not work for me either.

      I managed to get around the problem but placing the svg in an svg file (mysvg.svg) and then including it in my html file:

      <object data="mysvg.svg" type="image/svg+xml" width="1200" height="800">
      <embed src="mysvg.svg" type="image/svg+xml" width="1200" height="800"/>
      </object>

      The above worked on Chrome, FF, Safari, and Opera.

      Best,

      Helen

      --- In svg-developers@yahoogroups.com, "David Dailey" <ddailey@...> wrote:
      >
      > Hmmm.. Sujana's suggestion doesn't do it for my Safari: (5.04, windows)
      >
      >
      >
      > The following works in FF4, Chrome and IE9:
      >
      >
      >
      > <!DOCTYPE HTML>
      >
      > <html>
      >
      > <body>
      >
      > <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
      >
      > <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="green"
      > />
      >
      > </svg>
      >
      > </body>
      >
      > </html>
      >
      >
      >
      > Notes:
      >
      > 1, the doctype is needed, as I understand it, to get IE9 out of quirks
      > mode.
      > 2. The simpler xmlns= rather than xmlns:svg seems to work
      >
      > 3. adding xmlns:xlink="http://www.w3.org/1999/xlink" as per Sujana's
      > suggestion doesn't do anything in my six browsers (the five mentioned, plus
      > ASV).
      >
      > 4. I didn't expect ASV to do it. All tricks I've ever seen for doing SVG
      > inline in HTML within ASV are terribly idiosyncratic and would (I think) be
      > hopeless in other browsers.
      >
      >
      >
      > I can't seem to get Safari or Opera to render the SVG in this manner. So
      > some questions:
      >
      >
      >
      > 1. What does the spec say about this?
      >
      > 2. Which spec (HTML or SVG) would address the issue?
      >
      > 3. Is there another trick of some sort for getting Opera and Safari to
      > play this game?
      >
      > 4. While I've heard it claimed that Safari is just Chrome but a few
      > month behind, my experiments seem not to confirm this. There are cases in
      > which Chrome has done things for more than a year that remain broken in
      > Safari (maybe the periodicity of my observations just coincides with the
      > frequency of bug oscillations in Webkit hence masking an actual lag
      > function?) Likewise I have seen things that Safari does well for which
      > Chrome fails. Is the theory that Safari is simply a retarded version of
      > Chrome (pardon the language, but you know what I mean) accurate when it
      > comes to SVG or is the story a bit more complicated than that?
      >
      > Cheers
      >
      > David
      >
      >
      >
      > From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
      > On Behalf Of SujanaRajendran
      > Sent: Saturday, April 16, 2011 10:38 AM
      > To: svg-developers@yahoogroups.com
      > Subject: [svg-developers] Re: Problem viewing SVG (in HTML) on Safari
      >
      >
      >
      >
      >
      > Hi Helen,
      >
      > Try this code...
      >
      > <html>
      > <body>
      > <svg xmlns="http://www.w3.org/2000/svg"
      > xmlns:xlink="http://www.w3.org/1999/xlink">
      > <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="green"
      > />
      > </svg>
      > </body>
      > </html>
      >
      > Sujana.
      >
      > --- In svg-developers@yahoogroups.com
      > <mailto:svg-developers%40yahoogroups.com> , "helen_volos"
      > <hstephanopoulos@> wrote:
      > >
      > > Safari does not render the following code (Chrome and Firefox render it on
      > Mac):
      > >
      > > <html>
      > > <body>
      > > <svg width="400" height="400" xmlns:svg="http://www.w3.org/2000/svg">
      > > <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2"
      > fill="green" />
      > > </svg>
      > > </body>
      > > </html>
      > >
      > > I would greatly appreciate if you can point out what is missing from the
      > above.
      > >
      > > Thanks,
      > >
      > > Helen
      > >
      >
      >
      >
      >
      >
      > [Non-text portions of this message have been removed]
      >
    • Holger Jeromin
      ... xhtml supports mixing of html+svg content. This works crossbrowser (all, but ie6-8 does not even render the page if served as xml+xhtml, which is required
      Message 2 of 6 , Apr 17, 2011
      • 0 Attachment
        David Dailey schrieb am 16.04.2011 17:11:
        > Hmmm.. Sujana's suggestion doesn't do it for my Safari: (5.04, windows)
        > The following works in FF4, Chrome and IE9:
        > <!DOCTYPE HTML>
        > <html>
        > <body>
        >
        > <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
        > <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="green"
        > />
        > </svg>
        > </body>
        > </html>
        >
        > Notes:
        > 1, the doctype is needed, as I understand it, to get IE9 out of quirks
        > mode.
        > 2. The simpler xmlns= rather than xmlns:svg seems to work
        >
        > 3. adding xmlns:xlink="http://www.w3.org/1999/xlink" as per Sujana's
        > suggestion doesn't do anything in my six browsers (the five mentioned, plus
        > ASV).
        >
        > 4. I didn't expect ASV to do it. All tricks I've ever seen for doing SVG
        > inline in HTML within ASV are terribly idiosyncratic and would (I think) be
        > hopeless in other browsers.
        >
        >
        >
        > I can't seem to get Safari or Opera to render the SVG in this manner. So
        > some questions:
        > 1. What does the spec say about this?

        xhtml supports mixing of html+svg content. This works crossbrowser (all,
        but ie6-8 does not even render the page if served as xml+xhtml, which is
        required for real xhtml rendering)
        see: http://caniuse.com/#search=xhtml

        <?xml version="1.0" encoding="iso-8859-1"?>
        <!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
        "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
        <html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:svg="http://www.w3.org/2000/svg"
        xml:lang="en">
        <head>
        <title>title</title>
        </head>
        <body>
        <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="25" height="11">
        <svg:polyline points="0,10 4,05 8,10" />
        <svg:polyline points="0,05 4,00 8,05" />
        </svg:svg>
        </body>
        </html>

        > 2. Which spec (HTML or SVG) would address the issue?

        > 3. Is there another trick of some sort for getting Opera and Safari to
        > play this game?

        You can (and should?) make it XHTML.

        Your approach is html5. This works only with html5 parser. See support here:

        http://caniuse.com/#search=parser

        --
        best regards
        Holger
      • Erik Dahlstrom
        On Sat, 16 Apr 2011 17:11:50 +0200, David Dailey ... For Opera the above won t work unless is served as XHTML, at least until the HTML5 parser becomes the
        Message 3 of 6 , Apr 18, 2011
        • 0 Attachment
          On Sat, 16 Apr 2011 17:11:50 +0200, David Dailey
          <ddailey@...> wrote:

          > Hmmm.. Sujana's suggestion doesn't do it for my Safari: (5.04, windows)
          >
          >
          > The following works in FF4, Chrome and IE9:
          >
          >
          > <!DOCTYPE HTML>
          >
          > <html>
          >
          > <body>
          >
          > <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
          >
          > <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2"
          > fill="green"
          > />
          >
          > </svg>
          >
          > </body>
          >
          > </html>

          ...

          > I can't seem to get Safari or Opera to render the SVG in this manner. So
          > some questions:

          For Opera the above won't work unless is served as XHTML, at least until
          the HTML5 parser becomes the default.

          It should work just fine in the Opera Ragnarök builds[1] however (those
          that include the HTML5 parser with svg support). The old html parser only
          handles html elements, any svg elements will just be parsed as unknown
          html elements and won't render as svg.

          Cheers
          /Erik

          [1] http://labs.opera.com/news/2011/02/22/

          --
          Erik Dahlstrom, Core Technology Developer, Opera Software
          Co-Chair, W3C SVG Working Group
          Personal blog: http://my.opera.com/macdev_ed
        Your message has been successfully submitted and would be delivered to recipients shortly.