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

Re: Providing for multiple browsers

Expand Messages
  • Helder Magalhães
    ... Why would you want to force using embed for Internet Explorer? There s some information [1] on how to accomplish it using object . This may avoid the
    Message 1 of 16 , Jul 2, 2008
    View Source
    • 0 Attachment
      > 'svg_circle_embed.html' works in IE, [wow, first time for that]
      > 'svg_circle_object.html' works in Ff, [good, as expected]
      > both work in Opera, [ok, why not?]
      >
      > Now to combine these using conditional comments:

      Why would you want to force using "embed" for Internet Explorer?
      There's some information [1] on how to accomplish it using "object".
      This may avoid the (somehow ugly) conditional comment trickery! ;-)

      Hope this helps,

      Helder Magalhães

      [1] http://joliclic.free.fr/html/object-tag/en/object-svg.html
    • Kristien Ooms
      Hi, Thank you all for the tips you gave me last time. I m still at the initial phase of learning SVG, so it helped me a lot. But I ve just stumbled into a new
      Message 2 of 16 , Jul 2, 2008
      View Source
      • 0 Attachment
        Hi,



        Thank you all for the tips you gave me last time. I'm still at the initial
        phase of learning SVG, so it helped me a lot.

        But I've just stumbled into a new problem for which I cannot seem to find
        the solution.

        I have an svg document with dots and names. In an initial phase, certain
        names are invisible (for this I set the fill-opacity of the

        Texts to 0). When a button is clicked these names are moved to the left.
        After this animation has ended, the invisible names should

        become visible again (so fill-opcaticty=1). Below you can find an example of
        this, with only just a few names.

        When I use this code, the texts are invisible in the initial phase, but when
        the objects are moved to the left (with the animateTransform element)

        They are visible. After this animation has ended, the animation of the text
        is executed. But these text should not be visible during the Transform

        Animation. How can this be solved? (I'm working with the IE and adobe SVG
        Viewer)



        Many thanks!

        Kristien





        <?xml version="1.0" encoding="utf-8" standalone="no"?>



        <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

        <svg width="797.24409" height="629.26299" viewBox="0 0 797.24409 629.26299"
        enable-background="new 0 0 797.24409 629.26299"

        version="1.1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">



        <script type="text/ecmascript" xlink:href="verspringen.js"/>


        <script type="text/ecmascript">

        <![CDATA[



        var count=0;



        function clickFt(evt)

        {

        count++;

        //window.alert("counter: "+count);

        var SVGdoc=evt.target.ownerDocument;



        var useImage=SVGdoc.getElementById("useImage");

        var pan=SVGdoc.getElementById("pan");



        if(count==1){

        eerstePan(SVGdoc,pan);

        }

        else{

        window.alert("a click too much");

        }

        }



        //def variabelen

        var dur="0.1s";

        var valuesVerschijnen="0;0.1;1";

        var valuesVerdwijnen="1;0";

        var tempMatrix="";

        var i=0;

        var xWaarden, yWaarden;

        var pos=25;

        var begin="pan.end";



        //AANPASSINGEN NA EERSTE KEER TE PANNEN

        function eerstePan(SVGdoc, pan){



        var tempPos=0;



        //window.alert("eertePan");

        pan.setAttributeNS(null,"values",
        "0,0;-275,0");



        //vERSCHIJNEN

        //Soro verschijnen

        var
        animSoro=SVGdoc.getElementById("animSoro");

        animSoro.setAttribute("begin", begin);

        animSoro.setAttribute("values",
        valuesVerschijnen);

        animSoro.setAttribute("dur", dur);

        animSoro.setAttribute("fill", "freeze");

        animSoro.beginElement();



        //Schwerin verschijnen

        var
        animSchwerin=SVGdoc.getElementById("animSchwerin");

        animSchwerin.setAttribute("values",
        valuesVerschijnen);

        animSchwerin.setAttribute("begin", begin);

        animSchwerin.setAttribute("dur", dur);

        animSchwerin.setAttribute("fill", "freeze");



        //begin animaties

        pan.beginElement();



        }

        ]]></script>



        <g id="animButton" onclick="clickFt(evt);">

        <rect id="button" x="10" y="10" width="20"
        height="20" fill="red"/>

        <path id="driehoek" d="M 12 12 L 28 20 L 12
        28 Z" fill="white"/>

        </g>



        <defs>

        <g id="totalImage" transform="scale(2)
        translate(-150,-100)">

        <g id="cities">

        <clipPath id="SVG_CP_1">

        <path
        d="M0,0L0,629.26299L900.24409,629.26299L900.24409,0L0,0z"/>

        </clipPath>

        <g id="markerSchwerin"
        font-family="'ESRI Geometric Symbols'" font-size="1" kerning="0"
        font-weight="400" fill="#000000" clip-path="url(#SVG_CP_1)"
        xml:space='preserve'>

        <text
        transform="matrix(3.12004 0 0 3.11958 542.04745 184.05507)"><tspan x="0
        ">x</tspan></text>



        </g>

        <g id="markerSoro" font-family="'ESRI
        Geometric Symbols'" font-size="1" kerning="0" font-weight="400"
        fill="#000000" fill-opacity="1" clip-path="url(#SVG_CP_1)"
        xml:space='preserve'>

        <text
        transform="matrix(3.12004 0 0 3.11958 545.6475 140.38099)"><tspan x="0
        ">x</tspan></text>



        </g>

        </g>



        <g font-family="'Arial'" font-size="1"
        kerning="0" font-weight="400" fill="#000000" clip-path="url(#SVG_CP_1)"
        xml:space='preserve' fill-opacity="0">

        <text
        transform="matrix(6.9601 0 0 6.95906 540 136)"><tspan x="0 0.65507 1.20672
        1.55149 ">Soro</tspan></text>

        <animate id="animSoro"
        attributeName="fill-opacity"/>

        </g>

        <g font-family="'Arial'" font-size="1"
        kerning="0" font-weight="400" fill="#000000" clip-path="url(#SVG_CP_1)"
        xml:space='preserve' fill-opacity="0">

        <text
        transform="matrix(6.9601 0 0 6.95906 540 180.42064)"><tspan x="0 0.65507
        1.13776 1.72388 2.44791 2.99955 3.30985 3.55119 ">Schwerin</tspan></text>

        <animate id="animSchwerin"
        attributeName="fill-opacity"/>

        </g>

        </g>

        </defs>



        <use id="useImage" xlink:href="#totalImage">

        <animateTransform id="pan"
        attributeName="transform" type="translate" dur="1s" begin="indefinite"
        calcMode="linear" fill="freeze"/>

        </use>



        </svg>































        [Non-text portions of this message have been removed]
      • cwflamont
        ... Indeed it does. Thank you, Helder. This: SVG circle using object
        Message 3 of 16 , Jul 2, 2008
        View Source
        • 0 Attachment
          Helder Magalhães wrote:

          > Why would you want to force using "embed" for Internet Explorer?
          > There's some information [1] on how to accomplish it using "object".
          > This may avoid the (somehow ugly) conditional comment trickery! ;-)
          >
          > Hope this helps,
          >
          > Helder Magalhães
          >
          > [1] http://joliclic.free.fr/html/object-tag/en/object-svg.html
          >

          Indeed it does. Thank you, Helder. This:

          <html>
          <head>
          <title>
          SVG circle using object
          </title>
          </head>
          <body>
          <object type="image/svg+xml" data="svg_circle4_loads_by_ref.svg"
          width="200" height="200">
          <param name="src" value="svg_circle4_loads_by_ref.svg">
          alt : <a href="svg_circle4_loads_by_ref.svg">circle.svg</a>
          </object>
          </body>
          </html>

          works here with Opera(9.5), Ff(3), and IE(7)+Adobe(3):

          http://www.gateho.nildram.co.uk/temp/graphics/SVG/svg_circle_joliclic.html

          So how and why does this work when other methods fail, and how the
          hell would one be expected to dream up this particular recipe?
        • Frank Bruder
          I use the following code to embed SVGs in HTML. The conditional comments make Internet Explorer only parse the second part and all other Browsers parse the
          Message 4 of 16 , Jul 2, 2008
          View Source
          • 0 Attachment
            I use the following code to embed SVGs in HTML.
            The conditional comments make Internet Explorer only parse the second
            part and all other Browsers parse the first part.

            <!--[if !IE]>-->
            <object type="image/svg+xml" data="image.svg" width="27" height="27">
            Fallback content.
            </object>
            <!--<![endif]-->
            <!--[if IE]>
            <object
            classid="clsid: 78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"
            codebase="http://download.adobe.com/pub/adobe/magic/svgviewer/
            win/3.x/3.03/en/SVGView.exe"
            width="27" height="27" data="image.svg" type="image/svg+xml">
            <param name="src" value="image.svg">
            <param name="wmode" value="transparent">
            Fallback content
            </object>
            <![endif]-->

            The classid and codebase attributes could be changed to point IE to
            Renesis rather than ASV.
            The use of classid and codebase attributes causes Internet Explorer
            to show a dialogue window asking the user if the plugin shoud be
            downloaded. In other browsers this breaks the object tag. Conditional
            comments can make up for that, but this way the code needs to be
            doublicated.
            It would really be useful to have an XHTML deploy script, so you can
            just write XHTML, use simple object tags for all kinds of multimedia
            content and have the script implement all browser specific issues.

            The first <param> tag provides the url of the SVG in an ASV specific
            way. Without this <object> has some issues in IE+ASV.
            The second <param> tag makes transparent parts of the SVG
            transparent. Otherwise ASV draws on a white background.
            The <param> tags do not cause problems in other browsers.

            I guess it would also be sufficient to just add
            <!--[if IE]>
            <object id="AdobeSVG" classid="clsid:78156a80-
            c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
            <![endif]-->
            to the head section to ensure that the user will be prompted to
            download the plugin if it isn't installed yet,
            and to use only one <object> tag with the two <param> tags for each
            SVG.


            I also use IE's implementation of HTML+Time to display an error
            message if no SVG plugin is installed.

            To do this add the namespace declaration
            xmlns:t="urn:schemas-microsoft-com:time"

            to the <html> tag, and add the processing instruction
            <?import namespace="t" implementation="#default#time2" ?>

            in the head section along with a style tag especially for IE:
            <!--[if IE]><style>
            .time {behavior:url(#default#time2);}
            </style><![endif]-->

            Then place the fallback content for IE (only the second one of the
            object tags) inside a div with attributes like this:
            <div id="noasv" class="time" begin="0s">

            So that the second part of the embedding code looks like
            <!--[if IE]>
            <object
            classid="clsid: 78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"
            codebase="http://download.adobe.com/pub/adobe/magic/svgviewer/
            win/3.x/3.03/en/SVGView.exe"
            width="27" height="27" data="image.svg" type="image/svg+xml">
            <param name="src" value="image.svg">
            <param name="wmode" value="transparent">

            <div id="noasv" class="time" begin="0s">
            Fallback content
            </div>
            </object>
            <![endif]-->

            When you now write something like this:

            <!--[if IE]>
            <div id="noasvmsg" class="time"
            begin="noasv.begin;"
            end="closemsg.click;"
            timeaction="display"
            style=" position:absolute; left:1%; width:98%; padding:37% 1em;
            border:double 6px #FF2222; text-align:center; ">
            <p>
            ...Something along the lines of:
            Your webbrowser is stupid.
            You can make up for that by downloading a plugin from [here]
            or download a more advanced browser from [here]
            ...
            </p>
            <div id="closemsg">
            -Close this message-
            </div>
            </div>
            <![endif]-->

            To all browsers except IE this is just a comment.
            In IE it will be displayed when the object tag's fallback content is
            shown (because of begin="noasv.begin;") which will only happen if the
            SVG is not shown.

            Putting the error message inside a separate <div> not inside the
            <object> has the advantage that I can use absolute positioning to
            display it large atop other content. If I'd place it inside the
            <object> tag the positioning would depend on its ancestor elements.

            --- In svg-developers@yahoogroups.com, "cwflamont" <charles@...>
            wrote:
            >
            > Could someone please point me towards recent thinking on how to get
            > SVG content to download and display properly in Multiple browsers?
            >
            > The best I can find so far is at:
            >
            > http://wiki.svg.org/Inline_SVG
            >
            > but even then I find that it needs to be stored as an .html file for
            > it download and display properly in Internet Explorer(7) but as an
            > .xhtml to work with Firefox(3.0) & Opera(9.5).
            >
            > I find that if I try to open an .xhtml file in IE, it opens it in
            Ff.
            > This is despite doing the registry item deletion (to do with IE6 +
            IE7
            > Beta) I found somewhere.
            >
            > The similar, but more elaborate example at:
            >
            > http://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml
            >
            > works less well for me, in that even when given an .html suffix it
            > still does not display the SVG in Explorer.
            >
            > Does referencing the SVG as an <object/> make things better or
            worse?
            >
            > Clue?
            >
          • Frank Bruder
            ... for ... Viewing the source of your files I found that the first conditional comment has en-dashes (U+2013) instead of hyphen-minuses (U+002D) and thus is
            Message 5 of 16 , Jul 2, 2008
            View Source
            • 0 Attachment
              --- In svg-developers@yahoogroups.com, "cwflamont" <charles@...>
              wrote:
              >
              >
              > My own attempts are at:
              > http://www.gateho.nildram.co.uk/temp/graphics/SVG/
              >
              >...
              >
              > Viewing the source of these in Ff shows that something is stripping
              > out the '--' after the first 'endif', which I do not understand at
              > all. Why does that bit work in the puidokas example above, but not
              for
              > me?

              Viewing the source of your files I found that the first conditional
              comment has en-dashes (U+2013) instead of hyphen-minuses (U+002D) and
              thus is not a comment. Whatever editor you used has probably replaced
              them automatically.
            • Helder Magalhães
              ... Setting type attribute is a good practice, and forgetting it can lead to weird behavior (for example, displaying SVG contents as XML text when Visual
              Message 6 of 16 , Jul 3, 2008
              View Source
              • 0 Attachment
                > <object type="image/svg+xml" data="svg_circle4_loads_by_ref.svg"
                > width="200" height="200">
                > <param name="src" value="svg_circle4_loads_by_ref.svg">
                > alt : <a href="svg_circle4_loads_by_ref.svg">circle.svg</a>
                > </object>
                >
                > works here with Opera(9.5), Ff(3), and IE(7)+Adobe(3):
                >
                > So how and why does this work when other methods fail, and how the
                > hell would one be expected to dream up this particular recipe?

                Setting "type" attribute is a good practice, and forgetting it can
                lead to weird behavior (for example, displaying SVG contents as XML
                text when Visual Studio 2005 is installed).

                The "param" trick seems to work due to the implementation Internet
                Explorer uses, which internally seems to interpret both "embed" and
                "object" in a similar way.

                Finally, I personally prefer, instead of using a link to the file as
                alternative text ("alt : ..."), a more mean full note like:

                IMO the whole thing deserves, in fact, more publicity...

                Regards,

                Helder Magalhães
              • cwflamont
                ... Thanks, Frank; rewriting that works. I think I cut and pasted the syntax from the web. In now have two ways to produce a single file which will display
                Message 7 of 16 , Jul 3, 2008
                View Source
                • 0 Attachment
                  --- In svg-developers@yahoogroups.com, "Frank Bruder" <redurbf@...> wrote:

                  > > Viewing the source of these in Ff shows that something is stripping
                  > > out the '--' after the first 'endif', which I do not understand at
                  > > all.
                  >
                  > Viewing the source of your files I found that the first conditional
                  > comment has en-dashes (U+2013) instead of hyphen-minuses (U+002D) and
                  > thus is not a comment.

                  Thanks, Frank; rewriting that works. I think I cut and pasted the
                  syntax from the web. In now have two ways to produce a single file
                  which will display properly when viewed with Explorer+Adobe, Firefox,
                  Opera and Safari. Adding 'height... width...' seems to help.
                Your message has been successfully submitted and would be delivered to recipients shortly.