SVG shape-rendering

[imedadel]

Hi, thanks for the amazing work on TailwindCSS! I recently came across shape-rendering for SVG elements and I wanted to suggest adding it to TailwindCSS. It's like text-rendering but for SVG.

This is useful for super tiny icons that are rendered blurry.

Thanks!

[simonswiss]

Hey!

I had never heard of this until now 😅

Looks useful! Not sure if too "niche" to make it to core, but since it would have a very small footprint, it's not out of the question (providing there is significant demand for it).

In the meantime, you can easily add this to your projects via a Tailwind plugin!

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

const shapeRendering = plugin(function ({ addUtilities }) {
  const newUtilities = {
    '.shape-auto': {
      'shape-rendering': 'auto',
    },
    '.shape-optimize-speed': {
      'shape-rendering': 'optimizeSpeed',
    },
    '.shape-crisp-edges': {
      'shape-rendering': 'crispEdges',
    },
    '.shape-geometric-precision': {
      'shape-rendering': 'geometricPrecision',
    },
  }

  addUtilities(newUtilities)
})

module.exports = {
  theme: {
    extend: {},
    },
  },
  variants: {},
  plugins: [shapeRendering],
}

Here's a Tailwind Play example of this in action 👍

[dinesh-hills]

Thanks for including an example too.