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?
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.
Is there a way in which we can save an SVG with viewBox, height, and width attributes together?
Can you show a text example of what you want to do ?
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?
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>
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?
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