6

I want to draw polygon and path elements in svg in cm instead that in pixel (the default option). I was able to do it for line and rectangle adding cm after the number but the following svg code does not work:

<svg width="70cm" height="70cm">
<polygon points="1cm,1cm  2.5cm, 1cm  3cm, 13cm  1cm, 13cm"
    style="stroke: #000099;
     fill: #3333cc;
     fill-opacity: 1;
     "  
     />
</svg>

Same for path. Does anyone know how to solve this?

UPDATE: I tried with different screens, reading a svg file with inkscape or with Chrome. I measured cm on the screen, since I want real-world cm for the shapes that I draw. Here the puzzling results with:

<svg width="20cm" height="20cm" viewBox="0 0 20 20" >
  <polygon points='1,1  2.5,1  3,10  1,10'
    style="stroke: #000000; fill:none;"/>
</svg>

macbook air screen, 118 pixel per inch: the polygon is never in real measures, always smaller, both in inkscape and Chrome on another screen, 166 pixel per inches, measures are ok in Chrome but not in Inkscape. The same if I try to import in SVG-edit.

Does anybody know what's wrong in Inkscape?

Thanks

sarah_AI
  • 61
  • 2
  • 4
  • possible duplicate of [How do I scale an SVG polygon in ems?](http://stackoverflow.com/questions/8515524/how-do-i-scale-an-svg-polygon-in-ems) – O. R. Mapper Jun 12 '15 at 15:14
  • 1
    @O.R.Mapper nothing to do with *em's*, OP is talking about *cm*. OP you can't do that without knowing the device DPI - This question is effectively a duplicate of this: http://stackoverflow.com/questions/27726232/scale-mm-to-pixels-in-css/27726670#27726670 - Generally speaking **a pixel is NOT a real-world measurement unit**; I'm assuming of course that you mean the rectangle you want to create would equal 1cm on the screen for example. – nicholaswmin Jun 12 '15 at 15:37
  • @NicholasKyriakides: "nothing to do with em's, OP is talking about cm" - Pardon me? This question is about expressing SVG polygon points in a concrete unit that can be specified for the coordinates and size of a rectangle, but not directly in the `points` attribute of a polygon. The question I linked to is **precisely the same**. The only difference is that one of the questions uses the example of *cm*, the other one *em*, but that is hardly a **conceptual difference**, is it? – O. R. Mapper Jun 12 '15 at 15:46
  • @O.R.Mapper Depends what the OP is trying to achieve - If they just want the SVG to have *cm*'s being used in the shape definition(and just that) then you are right - If they want to have the shape taking real-world space on the screen as *that much cm* then you are wrong. More often that not the case is the latter - but let's see. – nicholaswmin Jun 12 '15 at 15:49
  • @NicholasKyriakides: Given that the OP seemed happy with the result of "adding cm after the number" when they tried that "for line and rectangle", it sounds pretty much as if they are after using *cm* in the shape definition. – O. R. Mapper Jun 12 '15 at 15:51
  • @O.R.Mapper Solid point - Let's see though. – nicholaswmin Jun 12 '15 at 15:52

1 Answers1

6

You can't directly. BUT (there is always a but in computer science) from the documentation (W3C) :

  • The points in a polygon are expressed in user coordinate system
  • "1cm" equals "35.43307px" (and therefore 35.43307 user units)

So I suggest you add a transform to your polygon which does the conversion and omit the 'cm' in the list of points :

<svg width="15cm" height="15cm">
    <g transform="scale(35.43307)">
        <polygon points="1,1  2.5,1  3,13  1,13"
                 style="stroke: #000099; fill: #3333cc; fill-opacity: 1;" />
    </g>
</svg>
TrapII
  • 2,219
  • 1
  • 15
  • 15
  • 5
    you need to know the DPI of the device - your formula there assumes a 96-DPI screen, which is very often not the case - A pixel is not a real-world measurement unit – nicholaswmin Jun 12 '15 at 15:39
  • 3
    Yes, but in the web world 1 inch = 96 CSS "pixels". So Mathhieu's solution is correct if OP wants her polygons to match up with her other elements that are using cm. OP didn't say that she wanted her SVG cm to exactly match real world cm. – Paul LeBeau Jun 13 '15 at 02:56
  • @PaulLeBeau True, true - but we are missing him/her to clarify, hehe - I gave the warning anyway though – nicholaswmin Jun 13 '15 at 23:10
  • Yes, I would like to draw a polygon in cm as real-world measurement and, measuring on the screen, this is not the case for – sarah_AI Jun 14 '15 at 07:54
  • @Irene browsers do not work with real-world measurements so what you want is not possible. – Robert Longson Jun 15 '15 at 15:50