Skip to content

SVG notes

css-tricks.com/6-common-svg-fails-and-how-to-fix-them/

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

Usage

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.

Notes

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">

https://stackoverflow.com/questions/15335926/how-to-use-the-svg-viewbox-attribute

SVG Path Editor - https://yqnn.github.io/svg-path-editor/

Resources

https://svggradients.com/

SVG line animation