Inkscape.org
Beginners' Questions Saving SVG with viewBox, height, and width attributes together
  1. #1
    Radhin Das Radhin Das @redhin

    Is there a way in which we can save an SVG with viewBox, height, and width attributes together?

  2. #2
    inklinea inklinea @inklinea⛰️

    Can you show a text example of what you want to do ? 

  3. #3
    Radhin Das Radhin Das @redhin

    Thank you @inklinea

    I want to have viewBox, height, and width attributes defined like this:
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 27.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595 485.6" style="enable-background:new 0 0 595 485.6;" xml:space="preserve" width="595" height="485.6">
    <style type="text/css">
        .st0{display:none;}
        .st1{display:inline;}
        .st2{fill:none;stroke:#000000;}
        .st3{display:inline;fill:none;stroke:#FF0000;stroke-linecap:round;stroke-linejoin:round;}
    </style>
    <g id="Layer_1_00000083780863235087905320000013671248417926892980_" class="st0">
        <g class="st1">
            <polyline class="st2" points="-248.5,-111.9 893.5,-111.9 893.5,622.1 -248.5,622.1 -248.5,-111.9   " />
            <line class="st2" x1="-248.5" y1="-111.9" x2="893.5" y2="622.1" />
            <line class="st2" x1="893.5" y1="-111.9" x2="-248.5" y2="622.1" />
        </g>
    </g>
    <g id="contour_1" class="st0">
        <circle class="st3" cx="112.5" cy="248.1" r="210" />
        <circle class="st3" cx="622.5" cy="248.1" r="210" />
        <circle class="st3" cx="112.5" cy="248.1" r="300" />
        <circle class="st3" cx="622.5" cy="248.1" r="300" />
    </g>
    <g>
        <path d="M564,455.6V391c-7,1-14.1,1.5-21.4,1.5c-71.6,0-131.6-50.3-146.3-117.6h124.9v-64.2H396.3C411,143.4,470.9,93.1,542.6,93.1   c7.3,0,14.4,0.5,21.4,1.5V30c-7.1-0.7-14.2-1.1-21.4-1.1c-118.1,0-213.9,95.7-213.9,213.9s95.7,213.9,213.9,213.9   C549.8,456.7,556.9,456.3,564,455.6z" />
        <path d="M31,242.8c0,118.1,95.7,213.9,213.9,213.9c7.7,0,15.3-0.4,22.8-1.2v-64.7c-7.4,1.1-15,1.7-22.8,1.7   c-82.7,0-149.7-67-149.7-149.7s67-149.7,149.7-149.7c7.8,0,15.4,0.6,22.8,1.7V30.2c-7.5-0.8-15.1-1.2-22.8-1.2   C126.8,29,31,124.7,31,242.8z" />
    </g>
    <g id="Layer_3">
    </g>
    </svg>

    This SVG was exported using Adobe Illustrator. However, In Inkscape when I save it as an "Optimized SVG", viewBox is defined, not height and width. When I save it as a plain SVG, the height and width are defined, not the viewBox.

    Is there a way to have all three defined simultaneously using the Inkscape GUI?

  4. #4
    inklinea inklinea @inklinea⛰️

    I'm using 1.4 on Ubuntu 22 at the moment. 

    I've saved the code you posted as plain svg, I get this:

     

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!-- Generator: Adobe Illustrator 27.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

    <svg
       version="1.1"
       id="Layer_1"
       x="0px"
       y="0px"
       viewBox="0 0 595 485.6"
       style="enable-background:new 0 0 595 485.6;"
       xml:space="preserve"
       width="595"
       height="485.6"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:svg="http://www.w3.org/2000/svg"><defs
       id="defs6" />
    <style
       type="text/css"
       id="style1">
        .st0{display:none;}
        .st1{display:inline;}
        .st2{fill:none;stroke:#000000;}
        .st3{display:inline;fill:none;stroke:#FF0000;stroke-linecap:round;stroke-linejoin:round;}
    </style>
    <g
       id="Layer_1_00000083780863235087905320000013671248417926892980_"
       class="st0">
        <g
       class="st1"
       id="g2">
            <polyline
       class="st2"
       points="-248.5,-111.9 893.5,-111.9 893.5,622.1 -248.5,622.1 -248.5,-111.9   "
       id="polyline1" />
            <line
       class="st2"
       x1="-248.5"
       y1="-111.9"
       x2="893.5"
       y2="622.1"
       id="line1" />
            <line
       class="st2"
       x1="893.5"
       y1="-111.9"
       x2="-248.5"
       y2="622.1"
       id="line2" />
        </g>
    </g>
    <g
       id="contour_1"
       class="st0">
        <circle
       class="st3"
       cx="112.5"
       cy="248.1"
       r="210"
       id="circle2" />
        <circle
       class="st3"
       cx="622.5"
       cy="248.1"
       r="210"
       id="circle3" />
        <circle
       class="st3"
       cx="112.5"
       cy="248.1"
       r="300"
       id="circle4" />
        <circle
       class="st3"
       cx="622.5"
       cy="248.1"
       r="300"
       id="circle5" />
    </g>
    <g
       id="g6">
        <path
       d="M564,455.6V391c-7,1-14.1,1.5-21.4,1.5c-71.6,0-131.6-50.3-146.3-117.6h124.9v-64.2H396.3C411,143.4,470.9,93.1,542.6,93.1   c7.3,0,14.4,0.5,21.4,1.5V30c-7.1-0.7-14.2-1.1-21.4-1.1c-118.1,0-213.9,95.7-213.9,213.9s95.7,213.9,213.9,213.9   C549.8,456.7,556.9,456.3,564,455.6z"
       id="path5" />
        <path
       d="M31,242.8c0,118.1,95.7,213.9,213.9,213.9c7.7,0,15.3-0.4,22.8-1.2v-64.7c-7.4,1.1-15,1.7-22.8,1.7   c-82.7,0-149.7-67-149.7-149.7s67-149.7,149.7-149.7c7.8,0,15.4,0.6,22.8,1.7V30.2c-7.5-0.8-15.1-1.2-22.8-1.2   C126.8,29,31,124.7,31,242.8z"
       id="path6" />
    </g>
    <g
       id="Layer_3">
    </g>
    </svg>

     

     

  5. #5
    Radhin Das Radhin Das @redhin

    I use Windows 11 Enterprise. 

    Is there a way I can save/export an SVG in Inkscape with all three attributes defined in the output?

  6. #6
    Darren Hawkshaw Darren Hawkshaw @dhawkshaw

    Hi @redhin

    In my testing (Win10 Inkscape 1.4) , exporting to Plain SVG will preserve all three attributes.

    If you export as Optimised SVG, you need to make sure the 'Enable Viewboxing' option under the SVG Output tab is *unticked*. If it's left ticked, it will strip the width and height.

    Hope that's of help.

    Darren

  7. #7
    Radhin Das Radhin Das @redhin

    Thank you, @dhawkshaw, for the tip.

    I am using Inkscape 1.3.2, which might be the reason. I have raised a request with my IT team to get 1.4 installed. I will try an let you know.

  8. #8
    Radhin Das Radhin Das @redhin

     @dhawkshaw, I installed Inkscape 1.4. For testing, I removed the width, height, and viewBox attributes of an SVG and exported it as a plain SVG. Only the width and height attributes showed up in the output.

  9. #9
    Radhin Das Radhin Das @redhin

     @dhawkshaw, I installed Inkscape 1.4. For testing, I removed the width, height, and viewBox attributes of an SVG and exported it as a plain SVG. Only the width and height attributes showed up in the output.

  10. #10
    Darren Hawkshaw Darren Hawkshaw @dhawkshaw

    @redhin, Maybe then, your best option is to not delete the viewbox attribute, and then you should have all three when when you export as plain svg.

  11. #11
    Radhin Das Radhin Das @redhin

     @dhawkshaw Thank you. I will follow what you said. Illustrator takes care of all these three attributes in any case. I was looking for something like that. 

Inkscape Inkscape.org Inkscape Forum Beginners' Questions Saving SVG with viewBox, height, and width attributes together