LogoLogo
  • 🧙‍♂️Dude Coding Standards
  • HTML
    • Accessible HTML Guidelines
      • Blocks
      • Upper title/Prefix
      • Global links
      • Search form
    • HTML elements
      • Lists
      • Headings
  • PHP
    • PHP Guidelines
    • Linting PHP with PHP_CodeSniffer
  • CSS
    • CSS and SCSS Guidelines
      • Naming Conventions
        • Custom properties and variables
        • Naming classes
      • Defining font families
      • Nesting
    • Stylelint
  • SVGs
    • Importing SVG files into a project
    • SVGs and accessibility
    • Styling SVGs
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
Export as PDF
  1. SVGs

Importing SVG files into a project

Last updated 4 months ago

Was this helpful?

Important steps for all Dev Dudes to follow when adding SVGs to a project:

  1. Manually remove clipPaths from the file. This includes <g>, <clipPath>, and <def> tags, plus any additional child elements wrapped in <def> tags. Here’s a visual example where the tags to remove are commented out:

<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- <g clip-path="url(#clip0_6597_3671)"> -->
<path d="M2.25 0.75H22.75C22.75 0.75 23.75 0.75 23.75 1.75V22.25C23.75 22.25 23.75 23.25 22.75 23.25H2.25C2.25 23.25 1.25 23.25 1.25 22.25V1.75C1.25 1.75 1.25 0.75 2.25 0.75Z" stroke="#3A3A3A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.5 6.5V5H10.5V6.5" stroke="#3A3A3A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.5 10.75V5" stroke="#3A3A3A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.75 5H20" stroke="#3A3A3A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.75 9.5H20" stroke="#3A3A3A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.5 14H20" stroke="#3A3A3A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.5 18.5H20" stroke="#3A3A3A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- </g> -->
<!-- <defs> -->
<!-- <clipPath id="clip0_6597_3671"> -->
<!-- <rect width="24" height="24" fill="white" transform="translate(0.5)"/> -->
<!-- </clipPath> -->
<!-- </defs> -->
</svg>

  1. Copy the viewBox attribute and its values.

  2. Minimize the contents of the file with the in VSCode.

  3. Paste the viewBox attribute back into the file after the height attribute.

    • If the SVG is missing the viewbox attribute and its values, the SVG will be broken and the front-end Dude on the project will wonder why their pretty SVG styles aren’t showing up in the browser.

svgo extension