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

How to dynamically add a viewBox (Was: Re: [svg-developers] Re: Opera/FF/ASV behaviour on oversized SVGs)

Expand Messages
  • Erik Dahlström
    Jonathan, I m afraid that the script solution isn t going to work when the images are from another domain, but here s an example that works in Opera 9.5:
    Message 1 of 14 , Mar 10, 2008
    View Source
    • 0 Attachment
      Jonathan,
      I'm afraid that the script solution isn't going to work when the images
      are from another domain, but here's an example that works in Opera 9.5:

      <svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <animation xlink:href="bricky.svg" width="400" height="400"
      onload="fixup(this)"/>
      <script><![CDATA[
      function fixup(elm)
      {
      var svgns = "http://www.w3.org/2000/svg";
      var docelm = elm.contentDocument.documentElement;
      if(!docelm.hasAttributeNS(svgns, "viewBox"))
      {
      var viewbox = "0 0 " + docelm.getAttribute("width") + " " +
      docelm.getAttribute("height");
      docelm.setAttributeNS(svgns, "viewBox", viewbox);
      }
      }
      ]]></script>
      </svg>

      You should put this image[1] in the same directory as the svg. If you want
      you can replace "contentDocument" with "getSVGDocument()", but note that
      getSVGDocument() has been deprecated by the SVG WG in favor of
      contentDocument[2].

      Of course one might also generate the viewBox based on the boundingbox of
      the root element, which is likely to work better in some cases (though it
      is hard to calculate the "true" boundingbox that includes filter effects,
      stroke, markers etc).

      Cheers
      /Erik

      [1] http://clipart.nicubunu.ro/svg/pacman/bricky.svg
      [2] http://lists.w3.org/Archives/Public/www-svg/2008Feb/0060.html

      On Fri, 07 Mar 2008 16:47:59 +0100, ~:'' ありがとうございました。
      <j.chetwynd@...> wrote:

      > Erik,
      >
      > do you have a script that works in the general case?
      >
      > It would be convenient, for a project under development...
      >
      > cheers
      >
      > >> It's rather trivial for the user agent to do, and it's still
      > possible to do
      > using script I believe
      >
      > Jonathan Chetwynd
      >
      > j.chetwynd@...
      > http://www.peepo.com/
      >
      > +44 (0) 20 7978 1764
      >
      >
      > On 7 Mar 2008, at 12:14, Erik Dahlström wrote:
      >
      > On Sun, 02 Mar 2008 02:17:39 +0100, Jeff Schiller
      > <jeff_schiller@...> wrote:
      >
      >> --- In svg-developers@yahoogroups.com, Jonathan Watt <jwatt@...>
      >> wrote:
      >>>
      >>> Firefox 3 betas should now be doing the spec mandated overriding of
      >> the width
      >>> and height of the SVG just as ASV does. The behavior of Firefox 2 is
      >> just plain
      >>> broken I'm afraid (it shouldn't scroll).
      >>>
      >>> I also checked the link above in Opera 9.50 beta build 9815 and
      >> Safari 3.0.4
      >>> (523.15) and they have the same broken behavior of Firefox 2
      >> (scrollbars).
      >>
      >> Jonathan,
      >>
      >> This is great news - I had no idea. This means that the large volume
      >> of art on places like openclipart.org are going to be much more
      >> directly usable for web page art in the future (if Opera and Safari
      >> clean this up).
      >
      > Well, the scrollbars would go away for <object> and <embed>. That's all.
      > If the svg content doesn't specify the viewBox the content will not
      > scale
      > to the defined viewport, it will be clipped.
      >
      >> At the moment, I have to tidy up clip art by removing the width/height
      >> attributes on the <svg> element and adding a viewBox. With the proper
      >> overriding, this would no longer be necessary.
      >
      > The viewBox would still have to be added. However, viewBox
      > synthesizing is
      > a feature that could be added to SVG 1.2 Full if there's need for it.
      > It's
      > rather trivial for the user agent to do, and it's still possible to do
      > using script I believe (or of course as you note, by manual editing).
      >
      > Cheers
      > /Erik
      >



      --
      Erik Dahlstrom, Core Technology Developer, Opera Software
      Co-Chair, W3C SVG Working Group
      Personal blog: http://my.opera.com/macdev_ed
    • "~:'' ありがとうございました
      Erik, I have to say first that viewbox has taken me a long time to understand at all. it may be my introductory texts were not ideal.... the task of rapidly
      Message 2 of 14 , Mar 10, 2008
      View Source
      • 0 Attachment
        Erik,

        I have to say first that viewbox has taken me a long time to
        understand at all.
        it may be my introductory texts were not ideal....
        the task of rapidly converting 'random' svg files to fit a window may
        have helped me a little ~:"

        does your script cater for the case where the content is outside the
        window?
        ie say x="-300"
        thinks not..?

        have to say at the moment feeling this is a minor issue....

        regards

        Jonathan Chetwynd

        j.chetwynd@...
        http://www.peepo.com/

        +44 (0) 20 7978 1764


        On 10 Mar 2008, at 10:37, Erik Dahlström wrote:

        Jonathan,
        I'm afraid that the script solution isn't going to work when the images
        are from another domain, but here's an example that works in Opera 9.5:

        <svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <animation xlink:href="bricky.svg" width="400" height="400"
        onload="fixup(this)"/>
        <script><![CDATA[
        function fixup(elm)
        {
        var svgns = "http://www.w3.org/2000/svg";
        var docelm = elm.contentDocument.documentElement;
        if(!docelm.hasAttributeNS(svgns, "viewBox"))
        {
        var viewbox = "0 0 " + docelm.getAttribute("width") + " " +
        docelm.getAttribute("height");
        docelm.setAttributeNS(svgns, "viewBox", viewbox);
        }
        }
        ]]></script>
        </svg>

        You should put this image[1] in the same directory as the svg. If you
        want
        you can replace "contentDocument" with "getSVGDocument()", but note that
        getSVGDocument() has been deprecated by the SVG WG in favor of
        contentDocument[2].

        Of course one might also generate the viewBox based on the
        boundingbox of
        the root element, which is likely to work better in some cases
        (though it
        is hard to calculate the "true" boundingbox that includes filter
        effects,
        stroke, markers etc).

        Cheers
        /Erik

        [1] http://clipart.nicubunu.ro/svg/pacman/bricky.svg
        [2] http://lists.w3.org/Archives/Public/www-svg/2008Feb/0060.html

        On Fri, 07 Mar 2008 16:47:59 +0100, ~:'' ありがとうございま
        した。
        <j.chetwynd@...> wrote:

        > Erik,
        >
        > do you have a script that works in the general case?
        >
        > It would be convenient, for a project under development...
        >
        > cheers
        >
        > >> It's rather trivial for the user agent to do, and it's still
        > possible to do
        > using script I believe
        >
        > Jonathan Chetwynd
        >
        > j.chetwynd@...
        > http://www.peepo.com/
        >
        > +44 (0) 20 7978 1764
        >
        >
        > On 7 Mar 2008, at 12:14, Erik Dahlström wrote:
        >
        > On Sun, 02 Mar 2008 02:17:39 +0100, Jeff Schiller
        > <jeff_schiller@...> wrote:
        >
        >> --- In svg-developers@yahoogroups.com, Jonathan Watt <jwatt@...>
        >> wrote:
        >>>
        >>> Firefox 3 betas should now be doing the spec mandated overriding of
        >> the width
        >>> and height of the SVG just as ASV does. The behavior of Firefox
        2 is
        >> just plain
        >>> broken I'm afraid (it shouldn't scroll).
        >>>
        >>> I also checked the link above in Opera 9.50 beta build 9815 and
        >> Safari 3.0.4
        >>> (523.15) and they have the same broken behavior of Firefox 2
        >> (scrollbars).
        >>
        >> Jonathan,
        >>
        >> This is great news - I had no idea. This means that the large volume
        >> of art on places like openclipart.org are going to be much more
        >> directly usable for web page art in the future (if Opera and Safari
        >> clean this up).
        >
        > Well, the scrollbars would go away for <object> and <embed>.
        That's all.
        > If the svg content doesn't specify the viewBox the content will not
        > scale
        > to the defined viewport, it will be clipped.
        >
        >> At the moment, I have to tidy up clip art by removing the width/
        height
        >> attributes on the <svg> element and adding a viewBox. With the
        proper
        >> overriding, this would no longer be necessary.
        >
        > The viewBox would still have to be added. However, viewBox
        > synthesizing is
        > a feature that could be added to SVG 1.2 Full if there's need for it.
        > It's
        > rather trivial for the user agent to do, and it's still possible
        to do
        > using script I believe (or of course as you note, by manual editing).
        >
        > Cheers
        > /Erik
        >

        --
        Erik Dahlstrom, Core Technology Developer, Opera Software
        Co-Chair, W3C SVG Working Group
        Personal blog: http://my.opera.com/macdev_ed





        [Non-text portions of this message have been removed]
      • Erik Dahlström
        Jonathan, If the content is outside the window that s usually the intention of the author, at least in the Inkscape cases. If the viewBox attribute isn t
        Message 3 of 14 , Mar 10, 2008
        View Source
        • 0 Attachment
          Jonathan,

          If the content is outside the window that's usually the intention of the
          author, at least in the Inkscape cases.

          If the viewBox attribute isn't specified then any negative coordinate will
          be outside the viewport (or "window"). This is the usual case for clipart
          on openclipart.org.

          Anyway, since you seemed to want the boundingbox variant, here it is:

          var bbox = docelm.getBBox();
          docelm.setAttributeNS(svgns, "viewBox", bbox.x + " " + bbox.y + " " +
          bbox.width + " " + bbox.height);

          As you can see on the example below this means that the shadow is clipped
          a bit, since it is done using filters.

          Cheers
          /Erik

          On Mon, 10 Mar 2008 11:45:38 +0100, ~:'' ありがとうございました。
          <j.chetwynd@...> wrote:

          > Erik,
          >
          > I have to say first that viewbox has taken me a long time to
          > understand at all.
          > it may be my introductory texts were not ideal....
          > the task of rapidly converting 'random' svg files to fit a window may
          > have helped me a little ~:"
          >
          > does your script cater for the case where the content is outside the
          > window?
          > ie say x="-300"
          > thinks not..?
          >
          > have to say at the moment feeling this is a minor issue....
          >
          > regards
          >
          > Jonathan Chetwynd
          >
          > j.chetwynd@...
          > http://www.peepo.com/
          >
          > +44 (0) 20 7978 1764
          >
          >
          > On 10 Mar 2008, at 10:37, Erik Dahlström wrote:
          >
          > Jonathan,
          > I'm afraid that the script solution isn't going to work when the images
          > are from another domain, but here's an example that works in Opera 9.5:
          >
          > <svg xmlns="http://www.w3.org/2000/svg"
          > xmlns:xlink="http://www.w3.org/1999/xlink">
          > <animation xlink:href="bricky.svg" width="400" height="400"
          > onload="fixup(this)"/>
          > <script><![CDATA[
          > function fixup(elm)
          > {
          > var svgns = "http://www.w3.org/2000/svg";
          > var docelm = elm.contentDocument.documentElement;
          > if(!docelm.hasAttributeNS(svgns, "viewBox"))
          > {
          > var viewbox = "0 0 " + docelm.getAttribute("width") + " " +
          > docelm.getAttribute("height");
          > docelm.setAttributeNS(svgns, "viewBox", viewbox);
          > }
          > }
          > ]]></script>
          > </svg>
          >
          > You should put this image[1] in the same directory as the svg. If you
          > want
          > you can replace "contentDocument" with "getSVGDocument()", but note that
          > getSVGDocument() has been deprecated by the SVG WG in favor of
          > contentDocument[2].
          >
          > Of course one might also generate the viewBox based on the
          > boundingbox of
          > the root element, which is likely to work better in some cases
          > (though it
          > is hard to calculate the "true" boundingbox that includes filter
          > effects,
          > stroke, markers etc).
          >
          > Cheers
          > /Erik
          >
          > [1] http://clipart.nicubunu.ro/svg/pacman/bricky.svg
          > [2] http://lists.w3.org/Archives/Public/www-svg/2008Feb/0060.html
          >
          > On Fri, 07 Mar 2008 16:47:59 +0100, ~:'' ありがとうございま
          > した。
          > <j.chetwynd@...> wrote:
          >
          > > Erik,
          > >
          > > do you have a script that works in the general case?
          > >
          > > It would be convenient, for a project under development...
          > >
          > > cheers
          > >
          > > >> It's rather trivial for the user agent to do, and it's still
          > > possible to do
          > > using script I believe
          > >
          > > Jonathan Chetwynd
          > >
          > > j.chetwynd@...
          > > http://www.peepo.com/
          > >
          > > +44 (0) 20 7978 1764
          > >
          > >
          > > On 7 Mar 2008, at 12:14, Erik Dahlström wrote:
          > >
          > > On Sun, 02 Mar 2008 02:17:39 +0100, Jeff Schiller
          > > <jeff_schiller@...> wrote:
          > >
          > >> --- In svg-developers@yahoogroups.com, Jonathan Watt <jwatt@...>
          > >> wrote:
          > >>>
          > >>> Firefox 3 betas should now be doing the spec mandated overriding of
          > >> the width
          > >>> and height of the SVG just as ASV does. The behavior of Firefox
          > 2 is
          > >> just plain
          > >>> broken I'm afraid (it shouldn't scroll).
          > >>>
          > >>> I also checked the link above in Opera 9.50 beta build 9815 and
          > >> Safari 3.0.4
          > >>> (523.15) and they have the same broken behavior of Firefox 2
          > >> (scrollbars).
          > >>
          > >> Jonathan,
          > >>
          > >> This is great news - I had no idea. This means that the large volume
          > >> of art on places like openclipart.org are going to be much more
          > >> directly usable for web page art in the future (if Opera and Safari
          > >> clean this up).
          > >
          > > Well, the scrollbars would go away for <object> and <embed>.
          > That's all.
          > > If the svg content doesn't specify the viewBox the content will not
          > > scale
          > > to the defined viewport, it will be clipped.
          > >
          > >> At the moment, I have to tidy up clip art by removing the width/
          > height
          > >> attributes on the <svg> element and adding a viewBox. With the
          > proper
          > >> overriding, this would no longer be necessary.
          > >
          > > The viewBox would still have to be added. However, viewBox
          > > synthesizing is
          > > a feature that could be added to SVG 1.2 Full if there's need for it.
          > > It's
          > > rather trivial for the user agent to do, and it's still possible
          > to do
          > > using script I believe (or of course as you note, by manual editing).
          > >
          > > Cheers
          > > /Erik
          > >
          >



          --
          Erik Dahlstrom, Core Technology Developer, Opera Software
          Co-Chair, W3C SVG Working Group
          Personal blog: http://my.opera.com/macdev_ed
        • "~:'' ありがとうございました
          Erik, that does seem closer to my rather limited understanding, however there s an additional issue, in that this discussion has so far been limited to
          Message 4 of 14 , Mar 10, 2008
          View Source
          • 0 Attachment
            Erik,

            that does seem closer to my rather limited understanding,

            however there's an additional issue, in that this discussion has so
            far been limited to presumably viewbox.
            as I review the very few openclipart examples with title it happens
            that a g transform=matrix has been used on the whole document, or
            even part of it in one case at least....

            I did create a symbol version, but is there a simple way to include
            operations like this via the DOM?
            http://peepo.getmyip.com/~JonathanChetwynd/db/search.php?search=shield

            put another way, would it all be a lot easier, if:
            there was good documentation for authors and authoring tools.
            the author understood the benefits of labelling the document and
            it's parts with titles
            the id's related simply to the title to make readable links
            authoring tools are designed in such a way as to facilitate the
            process of repurposing and accessibility.

            kind regards

            Jonathan Chetwynd

            j.chetwynd@...
            http://www.peepo.com/

            +44 (0) 20 7978 1764


            On 10 Mar 2008, at 11:50, Erik Dahlström wrote:

            Jonathan,

            If the content is outside the window that's usually the intention of the
            author, at least in the Inkscape cases.

            If the viewBox attribute isn't specified then any negative coordinate
            will
            be outside the viewport (or "window"). This is the usual case for
            clipart
            on openclipart.org.

            Anyway, since you seemed to want the boundingbox variant, here it is:

            var bbox = docelm.getBBox();
            docelm.setAttributeNS(svgns, "viewBox", bbox.x + " " + bbox.y + " " +
            bbox.width + " " + bbox.height);

            As you can see on the example below this means that the shadow is
            clipped
            a bit, since it is done using filters.

            Cheers
            /Erik

            On Mon, 10 Mar 2008 11:45:38 +0100, ~:'' ありがとうございま
            した。
            <j.chetwynd@...> wrote:

            > Erik,
            >
            > I have to say first that viewbox has taken me a long time to
            > understand at all.
            > it may be my introductory texts were not ideal....
            > the task of rapidly converting 'random' svg files to fit a window may
            > have helped me a little ~:"
            >
            > does your script cater for the case where the content is outside the
            > window?
            > ie say x="-300"
            > thinks not..?
            >
            > have to say at the moment feeling this is a minor issue....
            >
            > regards
            >
            > Jonathan Chetwynd
            >
            > j.chetwynd@...
            > http://www.peepo.com/
            >
            > +44 (0) 20 7978 1764
            >
            >
            > On 10 Mar 2008, at 10:37, Erik Dahlström wrote:
            >
            > Jonathan,
            > I'm afraid that the script solution isn't going to work when the
            images
            > are from another domain, but here's an example that works in Opera
            9.5:
            >
            > <svg xmlns="http://www.w3.org/2000/svg"
            > xmlns:xlink="http://www.w3.org/1999/xlink">
            > <animation xlink:href="bricky.svg" width="400" height="400"
            > onload="fixup(this)"/>
            > <script><![CDATA[
            > function fixup(elm)
            > {
            > var svgns = "http://www.w3.org/2000/svg";
            > var docelm = elm.contentDocument.documentElement;
            > if(!docelm.hasAttributeNS(svgns, "viewBox"))
            > {
            > var viewbox = "0 0 " + docelm.getAttribute("width") + " " +
            > docelm.getAttribute("height");
            > docelm.setAttributeNS(svgns, "viewBox", viewbox);
            > }
            > }
            > ]]></script>
            > </svg>
            >
            > You should put this image[1] in the same directory as the svg. If you
            > want
            > you can replace "contentDocument" with "getSVGDocument()", but
            note that
            > getSVGDocument() has been deprecated by the SVG WG in favor of
            > contentDocument[2].
            >
            > Of course one might also generate the viewBox based on the
            > boundingbox of
            > the root element, which is likely to work better in some cases
            > (though it
            > is hard to calculate the "true" boundingbox that includes filter
            > effects,
            > stroke, markers etc).
            >
            > Cheers
            > /Erik
            >
            > [1] http://clipart.nicubunu.ro/svg/pacman/bricky.svg
            > [2] http://lists.w3.org/Archives/Public/www-svg/2008Feb/0060.html
            >
            > On Fri, 07 Mar 2008 16:47:59 +0100, ~:'' ありがとうございま
            > した。
            > <j.chetwynd@...> wrote:
            >
            > > Erik,
            > >
            > > do you have a script that works in the general case?
            > >
            > > It would be convenient, for a project under development...
            > >
            > > cheers
            > >
            > > >> It's rather trivial for the user agent to do, and it's still
            > > possible to do
            > > using script I believe
            > >
            > > Jonathan Chetwynd
            > >
            > > j.chetwynd@...
            > > http://www.peepo.com/
            > >
            > > +44 (0) 20 7978 1764
            > >
            > >
            > > On 7 Mar 2008, at 12:14, Erik Dahlström wrote:
            > >
            > > On Sun, 02 Mar 2008 02:17:39 +0100, Jeff Schiller
            > > <jeff_schiller@...> wrote:
            > >
            > >> --- In svg-developers@yahoogroups.com, Jonathan Watt <jwatt@...>
            > >> wrote:
            > >>>
            > >>> Firefox 3 betas should now be doing the spec mandated
            overriding of
            > >> the width
            > >>> and height of the SVG just as ASV does. The behavior of Firefox
            > 2 is
            > >> just plain
            > >>> broken I'm afraid (it shouldn't scroll).
            > >>>
            > >>> I also checked the link above in Opera 9.50 beta build 9815 and
            > >> Safari 3.0.4
            > >>> (523.15) and they have the same broken behavior of Firefox 2
            > >> (scrollbars).
            > >>
            > >> Jonathan,
            > >>
            > >> This is great news - I had no idea. This means that the large
            volume
            > >> of art on places like openclipart.org are going to be much more
            > >> directly usable for web page art in the future (if Opera and
            Safari
            > >> clean this up).
            > >
            > > Well, the scrollbars would go away for <object> and <embed>.
            > That's all.
            > > If the svg content doesn't specify the viewBox the content will not
            > > scale
            > > to the defined viewport, it will be clipped.
            > >
            > >> At the moment, I have to tidy up clip art by removing the width/
            > height
            > >> attributes on the <svg> element and adding a viewBox. With the
            > proper
            > >> overriding, this would no longer be necessary.
            > >
            > > The viewBox would still have to be added. However, viewBox
            > > synthesizing is
            > > a feature that could be added to SVG 1.2 Full if there's need
            for it.
            > > It's
            > > rather trivial for the user agent to do, and it's still possible
            > to do
            > > using script I believe (or of course as you note, by manual
            editing).
            > >
            > > Cheers
            > > /Erik
            > >
            >

            --
            Erik Dahlstrom, Core Technology Developer, Opera Software
            Co-Chair, W3C SVG Working Group
            Personal blog: http://my.opera.com/macdev_ed





            [Non-text portions of this message have been removed]
          Your message has been successfully submitted and would be delivered to recipients shortly.