Editing SVG files

I want to add a SVG image as logo for my blog website. It's not the first time I use SVG files in my project. But it's the first I tried to edit a SVG image. Edition on SVG is pretty easy! Guess that is one of the reasons why it's so popular!

The original SVG file, thanks Louie Greco for sharing the icon

Basically speaking, SVG is a readable image file, which makes itself different to other binary image file types. Open a SVG in an editor, you are able to adjust image's color, size, and even text.


  • Adjust color: color of vectors is specified in [fill] attribute in <path> tag:
    <path fill="#000000" ..>

  • Add text using <text> tag. You can specify font-color / size / style in attributes. If you want to remove a text, just remove the corresponding <text> tag in SVG file.
    <text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif"> Sample text </text>


References

  1. Wolf icon from Louie Greco's Noun Project: https://thenounproject.com/term/wolf/70573/
  2. Using SVG: https://css-tricks.com/using-svg/