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

Re: SVG font-size is not correctly rendering.

Expand Messages
  • Arjen
    Remove the px in the font-size declaration. The size is not in pixels but in viewbox units.
    Message 1 of 4 , Jul 20, 2012
      Remove the px in the font-size declaration. The size is not in pixels but in viewbox units.


      --- In svg-developers@yahoogroups.com, "Srinivas" <sinu.nayak2001@...> wrote:
      >
      > Dear Friends,
      >
      > I have below svg code.
      > I am opeing my svg file with IE8 (along with Adobe SVG Viewer) and Mozilla Firefox (ver 5.0.1).
      >
      >
      > ++++++++++++
      > <?xml version="1.0" standalone="yes"?>
      > <svg width="810" height="120" viewBox="0 0 810 120" xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full">
      > <text x="0" y="120" font-family="arial" font-size="120px" fill="blue" >Hello</text>
      > </svg>
      > ++++++++++++
      >
      > Here, though I am setting font-size="120px", when I view the svg file in browser, it is not 120 pixel high.
      >
      > Where am I wrong?
      >
      > Sincerely,
      > Srinivas Nayak
      >
    • Cameron McCormack
      ... px and unitless values are always equivalent when they represent lengths in SVG. ... It seems to be using the right font size for me in Firefox (Nightly,
      Message 2 of 4 , Jul 20, 2012
        Arjen:
        > Remove the px in the font-size declaration. The size is not in pixels
        > but in viewbox units.

        px and unitless values are always equivalent when they represent lengths
        in SVG.

        Srinivas:
        >> Here, though I am setting font-size="120px", when I view the
        >> svg file in browser, it is not 120 pixel high.

        It seems to be using the right font size for me in Firefox (Nightly,
        17). Compare it with an HTML page with 120px Arial text. Just because
        the font size is 120px doesn't mean that the distance from the bottom of
        the "H" to the top is 120px -- that's just the ascent of the font.
      • Jason Barnabas
        ... Good answer Cameron. Another way of looking at it is that px is the default value for dimension, assuming you are familiar with default values. ... Also
        Message 3 of 4 , Aug 4, 2012
          Cameron McCormack wrote:


          > Arjen:
          > > Remove the px in the font-size declaration. The size is
          > > not in pixels but in viewbox units.
          >
          > px and unitless values are always equivalent when they
          > represent lengths in SVG.

          Good answer Cameron. Another way of looking at it is that px
          is the default value for dimension, assuming you are
          familiar with default values.

          > Srinivas:
          > >> Here, though I am setting font-size="120px", when I view
          > >> the svg file in browser, it is not 120 pixel high.
          >
          > It seems to be using the right font size for me in Firefox
          > (Nightly, 17). Compare it with an HTML page with 120px
          > Arial text. Just because the font size is 120px doesn't
          > mean that the distance from the bottom of the "H" to the
          > top is 120px -- that's just the ascent of the font.


          Also correct. So Srinivas, if you still are not getting what
          you are looking for, it is because you are looking for
          something based on a faulty assumption. It was rendering
          correctly. It was not rendering they way you expected. I
          know because I had the same problem when I first started
          using SVG.

          In order to get an H and l's that go from top to bottom of
          the viewBox you defined, you'll have to use a larger value
          for font-size. However, when you accomplish that you'll find
          the bottoms of the e and the o are clipped, which I would
          find too annoying to put up with.

          You are then faced with the decision of adjusting the y
          value so they fit in the viewBox and going with a slightly
          smaller font-size value or "manually" adjusting the y value
          for the e and o so they'll be fully contained in your
          viewBox.

          If you don't want to go to that extreme, the following
          should do what you're looking for:
          <text x="0" y="118" font-family="arial" font-size="164"
          fill="blue" >Hello</text>

          Or if you do, you could use this instead:
          <text x="0" y="120" font-family="arial" font-size="167"
          fill="blue" >H
          <tspan dx="-46" dy="-2">e</tspan>
          <tspan dx="-46" dy="+2">ll</tspan>
          <tspan dx="-46" dy="-2">o</tspan>
          </text>

          Depending on just how finicky you want to get or the
          requirements of the project.

          I expect my tools to fulfill my needs but in order for them
          to do so I have to learn their limitations. There are a
          couple of things I use to find exactly what I want. One is
          the ability to lay one element on top of another. Another is
          to use svg fragments inside the main svg. By using text in
          different colors I can adjust the size and placement until
          it fits exactly what I want.

          Another thing that might help in understanding how SVG
          renders is to remember that the V in SVG stands for vector.

          A vector is a mathematical concept and vectors have no
          thickness. Therefore the vector is invisible until a stroke
          is added and in SVG the stroke is added on both sides of the
          the vector.

          I was accustomed to raster graphics and it took me a while
          to gain an understanding of the differences. When I mentally
          connected the mathematical concept of vector to the new
          drawing tool I was learning it made things much easier for
          me to understand.
          ____________________________________________________________


          I must be travelling,
          Jason


          tc+ ?23 ?mgt mt tne ?t20 t4++ ?t5 ?tp tg+ ?th ?to
          ru- ge++ 3i c++ jt- au+ ls pi+ ta+ he+
          kk++ hi+ as+ va+ dr ?ith vr ne so+ zh vi da sy
        Your message has been successfully submitted and would be delivered to recipients shortly.