A designer gave us a set of SVG assets for a project I’m working on. Unfortunately, they each had a <style> tag, and each one used the same conflicting class names (.st0, .st1, .st2, etc). I wrote a quick python script to convert the css rules to attributes so they wouldn’t conflict.
from bs4 import BeautifulSoup
import tinycss
import click
css_parser = tinycss.make_parser('page3')
# Known good list of attributes that can be applied inline.
# Feel free to expand this list if need be. These were just
# the only ones we needed.
STYLE_ATTRS = (
'fill', 'stroke', 'stroke-width', 'stroke-miterlimit',
)
def apply_styles(elem, declarations):
for decl in declarations:
if decl.name not in STYLE_ATTRS:
raise ValueError(
'unknown svg attribute: {}'.format(decl.name))
elem.attrs[decl.name] = decl.value.as_css()
@click.command()
@click.option('--infile', default='-', type=click.File('r'))
@click.option('--outfile', default='-', type=click.File('w'))
def inline_styles(infile, outfile):
soup = BeautifulSoup(infile.read(), 'html.parser')
stylesheet = css_parser.parse_stylesheet(
soup.find('style').text)
for rule in stylesheet.rules:
elems = soup.select(rule.selector.as_css())
for elem in elems:
apply_styles(elem, rule.declarations)
elem.attrs.pop('class')
soup.find('style').extract()
outfile.write(soup.prettify())
if __name__ == '__main__':
inline_styles()