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

Embarrassingly basic viewport/viewbox Q

Expand Messages
  • alex
    Hi all, So i m starting to build my own SVG, and have immediately run into a comprehension problem on how viewboxes work. A (slightly simplified) example:
    Message 1 of 7 , Aug 4, 2009
    • 0 Attachment
      Hi all,

      So i'm starting to build my own SVG, and have immediately run into a
      comprehension problem on how viewboxes work. A (slightly simplified)
      example:

      <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="180mm"
      height="180mm" viewBox="0 0 1800 1800">
      <svg:rect x="0" y="0" width="180mm" height="180mm"/>
      <svg:rect x="0" y="0" width="1800" height="1800"/>
      </svg:svg>

      Now, in my (obviously faulty) understanding of viewBox, these rects
      should be the same size -- but they aren't; the second is roughly 2.5x
      as large as the first. (As rendered by both oXygen 10.3's SVG Viewer and
      Amaya 11.2.

      (What i'm trying to figure out is how to have a drawing of a particular
      size, that can be displayed at 96dpi or whatever and also printed at
      300dpi, with "1px" being the appropriate size on both.)

      What am i missing?

      TIA,

      --alex.
    • Helder Magalhães
      Hi alex, ... I guess there might be some confusion regarding viewboxes and unit handling. The specification is pretty comprehensible in this scope [1]: there s
      Message 2 of 7 , Aug 5, 2009
      • 0 Attachment
        Hi alex,


        > Now, in my (obviously faulty) understanding of viewBox, these rects
        > should be the same size -- but they aren't; the second is roughly 2.5x
        > as large as the first.

        I guess there might be some confusion regarding viewboxes and unit handling. The specification is pretty comprehensible in this scope [1]: there's a good amount of information regarding the "viewBox" attribute [2], as well as units [3], although I'd recommend a quick read through the whole chapter. Have you tried it? ;-)


        > (As rendered by both oXygen 10.3's SVG Viewer and
        > Amaya 11.2.)

        I'd also suggest Opera when testing SVG content: it's one of the best available implementations [4]. Although apparently [5] oXygen uses Batik, which is also among the best implementations available. Note that, currently, Amaya SVG support is (unfortunately) still somehow limited [4] although it has gotten substantially better with the 11.2 release. :-)


        > (What i'm trying to figure out is how to have a drawing of a particular
        > size, that can be displayed at 96dpi or whatever and also printed at
        > 300dpi, with "1px" being the appropriate size on both.)

        I recall this being discussed several times already, so you may find tightly related threads by crawling this group's archive and/or the Batik mailing lists archive [6] (where I've seen this also).


        > TIA,

        Hope this helps,
        Helder


        [1] http://www.w3.org/TR/SVG11/coords.html
        [2] http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute
        [3] http://www.w3.org/TR/SVG11/coords.html#Units
        [4] http://www.codedread.com/svg-support.php
        [5] http://www.oxygenxml.com/svg_editor.html
        [6] http://www.nabble.com/Batik-f308.html
      • alex
        ... Well, yes, not being /completely/ senile, yet. ;-) But both the spec (and Eisenberg s _SVG Essentials_) keep saying things like The value of the viewBox
        Message 3 of 7 , Aug 5, 2009
        • 0 Attachment
          > Have you tried it? ;-)
          Well, yes, not being /completely/ senile, yet. ;-)

          But both the spec (and Eisenberg's _SVG Essentials_) keep saying things
          like "The value of the viewBox attribute... specif[ies] a rectangle in
          user space which should be mapped to the bounds of the viewport
          established by the given element" -- nowhere have i seen anything even
          hinting that the viewBox could be bigger than the viewport as declared
          in the <svg> element.

          It occurred to me in the shower this morning that the user agent might
          be refusing to let 1 user coordinate "pixel" be smaller than the actual
          current physical device pixel.


          > I'd also suggest Opera when testing SVG content
          This will end up being displayed on FireFox 3.x, which seems to be doing
          OK so far.


          > I recall this being discussed several times already, so you may find
          > tightly related threads by crawling this group's archive and/or the
          > Batik mailing lists archive [6] (where I've seen this also).
          A simple search didn't bring up much, but i shall certainly spend some
          more time doing that. Thank you for your patient and extensive answer to
          what must be for regulars a pretty annoyingly common question.

          --alex.
        • alyx
          OK, it would appear that Eisenberg (SVG Essentials, O Reilly 2002) is simply wrong, and that puzzles the hell out of me. Here s a reproduction of the
          Message 4 of 7 , Aug 5, 2009
          • 0 Attachment
            OK, it would appear that Eisenberg (SVG Essentials, O'Reilly 2002) is
            simply wrong, and that puzzles the hell out of me. Here's a reproduction
            of the viewport/viewBox used in example/figure 2-4, p.19:

            <svg xmlns="http://www.w3.org/2000/svg" version="1.0"
            width="4cm" height="5cm" viewBox="0 0 64 80">

            <rect x="0cm" y="0cm" width="4cm" height="5cm" style="stroke:
            green; fill: none"/>
            <rect x="0" y="0" width="64" height="80" style="stroke: blue; fill:
            none"/>

            </svg>

            That figure in the book clearly shows the 4cm and 64 user-unit locations
            on the x-axis to be the same, ditto with 5cm/80uu on the y-axis. My
            rects, however, are again not the same size, the latter being a little
            less than half the size of the former.

            I'm still missing something extremely basic here...

            --alex.
          • alex
            After searching the archives and reading the spec, i still have some sort of mental block about the viewBox and user units. If someone could show me what a svg
            Message 5 of 7 , Aug 7, 2009
            • 0 Attachment
              After searching the archives and reading the spec, i still have some
              sort of mental block about the viewBox and user units. If someone could
              show me what a svg tag would look like that would print an area of 8" x
              10", at 300dpi, such that a line with a stroke-size of 1px is 1/300"
              wide, and 10pt text is 10pt, i'd very much appreciate it. (Most of the
              samples i've found are in dimensionless user units, and i simply don't
              understand how long "20" is.)

              Thanks,

              --alex.
            • steltenpower
              viewBox / preserveAspectRatio / view/width / units / clipping (?) / overflow seem like things people have a hard time understanding, both as standalone SVG, or
              Message 6 of 7 , Aug 8, 2009
              • 0 Attachment
                viewBox / preserveAspectRatio / view/width / units / clipping (?) / overflow seem like things people have a hard time understanding, both as standalone SVG, or 'embedded' in HTML or other SVG

                Maybe you could make an interactive experiment that shows how all (many of) these things work, to save people a lot of time figuring it out. That would make good content for planetsvg.com

                Anyway, good luck



                --- In svg-developers@yahoogroups.com, alex <alyxtmp-netbeans@...> wrote:
                >
                > After searching the archives and reading the spec, i still have some
                > sort of mental block about the viewBox and user units. If someone could
                > show me what a svg tag would look like that would print an area of 8" x
                > 10", at 300dpi, such that a line with a stroke-size of 1px is 1/300"
                > wide, and 10pt text is 10pt, i'd very much appreciate it. (Most of the
                > samples i've found are in dimensionless user units, and i simply don't
                > understand how long "20" is.)
                >
                > Thanks,
                >
                > --alex.
                >
              • alex
                That s an excellent suggestion, and after playing around with basic settings, i think i ve finally got a handle on things... Apparently you can have a
                Message 7 of 7 , Aug 8, 2009
                • 0 Attachment
                  That's an excellent suggestion, and after playing around with basic
                  settings, i think i've finally got a handle on things... Apparently you
                  can have a resolution higher than the default (screen), or
                  properly-sized absolute units (in, cm, etc.), but not both at the same
                  time, as the sizes of the latter are calculated based on the initial
                  (screen) resolution.

                  So, a 1" x 1", 300dpi graphic would look something like:

                  // 1" at screen resolution - <object> won't take absolute units
                  (<object width="96" height="96">)

                  <svg width="96" height="96" viewBox="0 0 300 300"
                  preserveAspectRatio="xMinYMin meet">

                  (etc.)

                  </svg>
                  (</object>)

                  However, within the graphic, "1in" won't be 1in, but rather 96/300 =
                  0.32in. This, coupled with the fact that you can't use absolute units
                  in <path> data, would seem to make them pretty much useless in any case
                  other than a non-transformed, screen-destined graphic. Which i suppose
                  the spec does get around to pointing out, but i sure wish _SVG
                  Essentials_ had. As i'm just about to roof-test the damn thing, has
                  anyone a recommendation for a good (and recent) SVG book?

                  If i'm *still* wrong, please correct me; otherwise, hope this might help
                  any other pathetic newbies with this same confusion in the future.

                  --alex.

                  steltenpower wrote:
                  >
                  >
                  > viewBox / preserveAspectRatio / view/width / units / clipping (?) /
                  > overflow seem like things people have a hard time understanding, both as
                  > standalone SVG, or 'embedded' in HTML or other SVG
                  >
                  > Maybe you could make an interactive experiment that shows how all (many
                  > of) these things work, to save people a lot of time figuring it out.
                  > That would make good content for planetsvg.com
                  >
                  > Anyway, good luck
                  >
                  > --- In svg-developers@yahoogroups.com
                  > <mailto:svg-developers%40yahoogroups.com>, alex <alyxtmp-netbeans@...>
                  > wrote:
                  > >
                  > > After searching the archives and reading the spec, i still have some
                  > > sort of mental block about the viewBox and user units. If someone could
                  > > show me what a svg tag would look like that would print an area of 8" x
                  > > 10", at 300dpi, such that a line with a stroke-size of 1px is 1/300"
                  > > wide, and 10pt text is 10pt, i'd very much appreciate it. (Most of the
                  > > samples i've found are in dimensionless user units, and i simply don't
                  > > understand how long "20" is.)
                  > >
                  > > Thanks,
                  > >
                  > > --alex.
                Your message has been successfully submitted and would be delivered to recipients shortly.