SVG attributes (viewbox)

guidoferreyra

Hi everyone!
When exporting drawings to SVG is possible to instruct DrawBot to add the viewBox attribute?

Thanks in advance.

gferreira

as far as I can tell, the SVG viewBox attribute is not written by DrawBot. but SVG is XML, so you can easily parse and modify it with Python after it has been created:

# draw something, save as svg
size(600, 200)
fill(1, 0, 0)
rect(50, 60, 200, 100)
fill(0, 1, 0)
oval(300, 50, 200, 200)
fill(None)
stroke(0, 0, 1)
strokeWidth(10)
rect(0, 0, width(), height())
svgPath = 'svg-viewport-test.svg'
saveImage(svgPath)

# add viewBox attribute to <svg>
from lxml.etree import parse
xml = parse(svgPath)
svg = xml.getroot()
svg.attrib['viewBox'] = '0 0 180 150'
xml.write(svgPath.replace('.svg', '_viewbox.svg'))

hope this helps… cheers!

frederik

could elaborate why a viewBox is necessary? and how it relates to width, height DrawBot is using.

(maybe this discussion must move to an github issue)

guidoferreyra

Hi @gferreira, sorry for the late reply. Thanks! I will try your snippet is much more nicer than the find and I replace that I was doing.

Best!

guidoferreyra

Hi @frederik
I’m creating the svgs for later use in web. Not with an <img> tag but with <svg>, <path>, etc. So when I use svgs without viewbox attr the bounding box of the image is not properly procesed and lost its size.

Hope this poor explanation give some info.
Best!

frederik

continue here: https://github.com/typemytype/drawbot/issues/347

typemytype created this issue in typemytype/drawbot

SVG attributes (viewbox)

closed viewBox for svg #347