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.

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