Menu

Creating SVG icons

High Performance Coder

Some breadcrumbs for how I generated SVG icons.

  • Created/edited icons in Libre Office drawing package (.sdg file)
  • Exported as PDF (LO SVG export is rubbish)
  • Use pdftocairo to convert to SVG
pdfcairo -svg bank.pdf bank.svg
  • Open SVG file in emacs, and put into text mode.
  • edit width/height and viewbox attributes of the svg tag
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="145pt" height="130pt" viewBox="40 27 140 139" version="1.2">
  • find the first fill rule, and change the opacity to 0 (makes the background transparent)
    <path style=" stroke:none;fill-rule:evenodd;fill:rgb(100%,100%,100%);fill-opacity:0;" d="M 0 0 L 595.199219 0 L 595.199219 841.898438 L 0 841.898438 Z "/>

Related

Wiki: Home