Sizing SVG in HTML

Discussion in 'XML' started by Tom, Sep 9, 2005.

  1. Tom

    Tom Guest

    Is there any way to show a SVG in a HTML in different sizes by changing
    the
    width and height attributes of the object/embed tag?

    Assume a simple SVG like

    <svg width="100" height="100">
    <rect x="0" y="0" width="100" height="100"
    style="fill:none;stroke:black"/>
    <svg>

    which is embeded in a HTML page like

    <object type="image/svg+xml" data="simple.svg"
    width="100" height="100">
    <embed type="image/svg+xml" src="simple.svg"
    width="100" height="100"></embed>
    </object>

    the SVG is always shown at size 100x100 no matter what I provide for
    HTML width and height. Is there anything I can put into my SVG to make
    it custom sizable?
    I know I could write
    <svg width="100%" height="100%">
    <rect x="0%" y="0%" width="100%" height="100%"
    style="fill:none;stroke:black"/>
    <svg>
    But that is not ok for me, except for the initial SVG width and height
    attributes.

    __
    Tom
     
    Tom, Sep 9, 2005
    #1
    1. Advertising

  2. Tom

    Joris Gillis Guest

    Hi,

    Tempore 14:06:28, die Friday 09 September 2005 AD, hinc in foro {comp.text.xml} scripsit Tom <>:

    > Is there any way to show a SVG in a HTML in different sizes by changing
    > the
    > width and height attributes of the object/embed tag?


    I'm not an expert on the topic of SVG, but I'll try to help.

    Instead of specifying the width and height on the svg element, specify the viewBox:

    <svg viewBox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100"
    style="fill:none;stroke:black"/>
    <svg>

    Now you should be able to scale it via HTML syntax.

    regards,
    --
    Joris Gillis (http://users.telenet.be/root-jg/me.html)
    Deserta faciunt et innovationem appelant
     
    Joris Gillis, Sep 9, 2005
    #2
    1. Advertising

  3. Tom

    Tom Guest

    Yes! Thank you.
     
    Tom, Sep 9, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Arne Nordmann
    Replies:
    0
    Views:
    542
    Arne Nordmann
    Jun 28, 2004
  2. Mardagg
    Replies:
    0
    Views:
    819
    Mardagg
    May 12, 2006
  3. Mardagg
    Replies:
    0
    Views:
    681
    Mardagg
    May 12, 2006
  4. milof83

    svg to svg saving problem

    milof83, Aug 18, 2006, in forum: Java
    Replies:
    1
    Views:
    855
    Roland de Ruiter
    Aug 18, 2006
  5. Helmut Jarausch

    Re: svg-chart 1.1 SVG Charting Library

    Helmut Jarausch, May 20, 2008, in forum: Python
    Replies:
    0
    Views:
    481
    Helmut Jarausch
    May 20, 2008
Loading...

Share This Page