Skip to content

SVG notes

  • viewBox
  • width and height
  • fill and stroke
  • IDs
  • clipping and masking
  • namespaces (xmlns)


When an svg is exported from Adobe XD or Figma, it should have both width and height attributes, along with a viewBox attribute. This can then be used inline as an svg element. A class attribute can be added to control the width (use height: auto) and hover states.

Do not run svgo as this appears to remove the viewBox attribute.

The svg file can also be loaded as an image. This has the advantage of being cached when viewed on other pages on the site. width and height attributes can be obtained from the svg file. Example usage with WordPress:

<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/logo.svg" alt="Name" width="796" height="155" class="w-[180px] md:w-[270px]">

When using Tailwind, img will already have h-auto and max-w-full applied.


To scale an svg remove the width and height attributes. It should have a viewbox to match the width and height.

e.g. <svg width="540" height="509"> can be changed to <svg viewBox="0 0 540 509">

SVG Path Editor -


SVG line animation