Back to Plugins
SVG code with unique links ids

SVG code with unique links ids

Plugin set unique ids for gradients and masks into the svg code. The problem appears when two or more svg icons with the same type of gradient put on one page. The icons set the latest gradient from the svg files with two or more same ids. GitHub: https://github.com/irodger/svg-id-randomizer To solve the problem plugin adds 6 random numbers to ids inside the svg code links. This solution help to escape hand rewriting ids inside when you have the issue. Without plugin: <svg ...> ... <rect fill="url(#paint0_linear) ... > <rect fill="url(#paint1_radial) ... > ... <linearGradient id="paint0_linear" ... > <radialGradient id="paint1_radial" ... > ... </svg> With plugin: <svg ...> ... <rect fill="url(#paint0_linear-231475) ... > <rect fill="url(#paint1_radial-863795) ... > ... <linearGradient id="paint0_linear-231475" ... > <radialGradient id="paint1_radial-863795" ... > ... </svg> How to use it? Select what you need to export in svg, then run the plugin from the plugins menu. In the opened popup, you may see svg code (already with unique ids inside in case if the code has links to gradients). Sad news, guys 🥺 Unfortunately, Figma didn't allow access to the export dialog for plugin development. Also, viewers role can't use plugins 😢

randomizergradientsvgidentifiercode-generators

Plugin Preview

SVG code with unique links ids preview

About this plugin

Plugin set unique ids for gradients and masks into the svg code. The problem appears when two or more svg icons with the same type of gradient put on one page. The icons set the latest gradient from the svg files with two or more same ids. GitHub: https://github.com/irodger/svg-id-randomizer To solve the problem plugin adds 6 random numbers to ids inside the svg code links. This solution help to escape hand rewriting ids inside when you have the issue. Without plugin: ... ... ... With plugin: ... ... ... How to use it? Select what you need to export in svg, then run the plugin from the plugins menu. In the opened popup, you may see svg code (already with unique ids inside in case if the code has links to gradients). Sad news, guys 🥺 Unfortunately, Figma didn't allow access to the export dialog for plugin development. Also, viewers role can't use plugins 😢

Plugin Details

Version7
CreatedJanuary 30, 2020
Last UpdatedJanuary 31, 2020
CategorySoftware development
CreatorRoman Dvoryanov
Stats1890 installs, 34 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js