SVG prefix

Benchmark created on

Setup

const svgWithoutId = `<svg viewBox="0 0 156 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M58.2922 13.9879L57.8443 14.7688C57.7346 14.9613 57.7346 15.1985 57.8443 15.391L66.0467 29.6817C66.1564 29.876 66.3608 29.9937 66.582 29.9937H67.4798C67.7009 29.9937 67.9054 29.8741 68.0151 29.6817L76.2212 15.391C76.3309 15.1985 76.3309 14.9613 76.2212 14.7688L75.7732 13.9879C75.6636 13.7954 75.4591 13.6777 75.2379 13.6777H58.8276C58.6064 13.6777 58.4019 13.7954 58.2922 13.9879Z" fill="white"/>
<path d="M75.9312 20.0262L76.7509 20.2467C77.0223 20.3195 77.21 20.5662 77.21 20.8483V45.2577C77.21 45.5398 77.0223 45.7864 76.7509 45.8593L75.9312 46.0798C75.6598 46.1526 75.3755 46.0331 75.2342 45.7883L68.2938 33.6649C68.2399 33.5696 68.2121 33.4631 68.2121 33.3547V32.7531C68.2121 32.6448 68.2399 32.5364 68.2938 32.443L75.2342 20.3195C75.3736 20.0748 75.6598 19.9552 75.9312 20.0281V20.0262Z" fill="white"/>
<path d="M79.1821 20.2467L80.0018 20.0262V20.0281C80.2732 19.9552 80.5594 20.0748 80.6988 20.3195L87.6391 32.443C87.693 32.5364 87.7209 32.6448 87.7209 32.7531V33.3547C87.7209 33.4631 87.693 33.5696 87.6391 33.6649L80.6988 45.7883C80.5575 46.0331 80.2732 46.1526 80.0018 46.0798L79.1821 45.8593C78.9107 45.7864 78.723 45.5398 78.723 45.2577V20.8483C78.723 20.5662 78.9107 20.3195 79.1821 20.2467Z" fill="white"/>
<path d="M79.7397 14.7688L80.1877 13.9879C80.2973 13.7954 80.5018 13.6777 80.723 13.6777H97.1334C97.3545 13.6777 97.559 13.7954 97.6687 13.9879L98.1166 14.7688C98.2263 14.9613 98.2263 15.1985 98.1166 15.391L89.9105 29.6817C89.8008 29.8741 89.5964 29.9937 89.3752 29.9937H88.4774C88.2562 29.9937 88.0518 29.876 87.9421 29.6817L79.736 15.391C79.6263 15.1985 79.6263 14.9613 79.736 14.7688H79.7397Z" fill="white"/>
<path d="M90.8713 41.8493L90.8245 41.7538L86.5552 41.9464L86.3616 41.9543L86.4051 42.1405L86.5746 42.8565H90.8035L90.8406 42.7467L90.9697 42.3632L90.9778 42.3378V42.0689L90.9617 42.0355L90.8713 41.8493Z" fill="white"/>
<path d="M91.4104 42.1405L91.5799 42.8565H95.8071L95.8443 42.7467L95.975 42.3632L95.9831 42.3378V42.0689L95.9669 42.0371L95.8765 41.8493L95.8314 41.7538L91.5605 41.9464L91.3668 41.9543L91.4104 42.1405Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M90.8729 43.3785L90.8261 43.2798L90.7147 43.2878L88.2516 43.4755H88.2242L88.1984 43.4883L88.0176 43.5678L87.8998 43.6187L87.9256 43.7428L88.1031 44.6259V45.4677H87.3252V43.4326L87.1266 43.4787L86.5262 43.6171L86.5117 43.6203L86.4971 43.6267L86.3164 43.7062L86.1985 43.7588L86.2244 43.8829L86.4019 44.7564V49.3501L86.4923 49.3931L87.0233 49.6493L87.0572 49.6652H89.8108L90.0578 50.4194V53.2676H90.6598L90.7034 53.1785L90.9633 52.655L90.9794 52.6216V48.8775L90.9633 48.8457L90.8261 48.5609L90.7179 48.5673L87.4672 48.7487L87.3235 48.4177V46.4621L87.5786 46.3778H88.1015V47.813L88.2113 47.8496L88.6019 47.9785L88.6261 47.9865H90.655L90.6986 47.8974L90.9584 47.3739L90.9746 47.3405V43.5965L90.9584 43.5646L90.8681 43.3769L90.8729 43.3785ZM89.0264 44.3841H89.9706L90.0562 44.6371V47.0779H89.1119L89.0264 46.8265V44.3841Z" fill="white"/>
<path d="M92.6581 43.4739L92.7129 43.676L92.8421 44.139L92.8614 44.2075L92.9244 44.2393L93.4554 44.505L93.4893 44.5225H94.3077L94.3432 44.4143L94.4739 44.0292L94.482 44.0054V43.4739H92.6581Z" fill="white"/>
<path d="M91.5783 46.0628H94.8129L95.0598 46.817V53.266H95.6619L95.7055 53.1785L95.9653 52.655L95.9831 52.6216V45.2752L95.9669 45.2433L95.8765 45.0556L95.8314 44.9601L91.5589 45.1526L91.3652 45.1606L91.4088 45.3468L91.5783 46.0628Z" fill="white"/>
<path d="M85.8338 59.6101L85.766 59.5162L85.6562 59.5496L84.0744 60.0111L83.9356 60.0524L83.9614 60.1909L84.0308 60.5855L84.0486 60.6905L84.1535 60.7144L84.5554 60.8035L84.5796 60.8082L84.6071 60.8066L84.9702 60.77L85.0493 60.9992V64.3199H85.6401L85.6853 64.234L85.9548 63.7121L85.9726 63.6771V63.6389L85.9823 59.8694V59.8185L85.9532 59.7772L85.8338 59.6101Z" fill="white"/>
<path d="M89.2314 62.7207L89.2685 62.6125L89.3976 62.2275L89.4073 62.2036V61.7326H87.3284L87.3881 61.9363L87.5092 62.3404L87.5285 62.4057L87.5899 62.4375L88.1209 62.7032L88.1548 62.7207H89.2314Z" fill="white"/>
<path d="M90.8438 54.4275L90.7857 54.3336L90.6776 54.3543L86.5326 55.1244L86.5133 55.1276L86.4971 55.134L86.3164 55.2136L86.1985 55.2661L86.2244 55.3902L86.4003 56.2733V60.727L86.4907 60.7699L87.0217 61.0277L87.0556 61.0436H88.229L88.2662 60.9354L88.3953 60.5503L88.405 60.5249V60.1112L88.2613 60.0953L87.3235 59.9839V57.5939L87.5786 57.5096H89.8076L90.0546 58.2638V63.2601L89.0958 63.3731L88.9021 63.3953L88.9618 63.5783L89.0813 63.9538L89.1023 64.0191L89.1636 64.0477L89.6946 64.3055L89.7285 64.3214H90.6566L90.7018 64.2323L90.9617 63.7088L90.9778 63.6754V56.7252L90.9633 56.6917L90.8729 56.5056L90.8261 56.4085L90.7179 56.4133L87.4075 56.5947L87.3252 56.3496V55.9312L90.7099 55.457L90.8083 55.4443L90.8406 55.3504L90.9697 54.9653L90.9778 54.9415V54.6439L90.9552 54.6057L90.8438 54.4275Z" fill="white"/>
<path d="M91.5783 57.115H94.8129L95.0598 57.8692V59.3872H95.6619L95.7055 59.2981L95.9653 58.7746L95.9831 58.7412V56.3306L95.9669 56.2972L95.8765 56.1094L95.8314 56.0139L91.5589 56.2049L91.3652 56.2144L91.4088 56.4006L91.5783 57.115Z" fill="white"/>
<path d="M94.582 54.5278H92.7565L92.9421 55.1929L92.9615 55.2597L93.0245 55.2915L93.5555 55.5588L93.5894 55.5763H94.4077L94.4432 55.4665L94.574 55.0831L94.582 55.0576V54.5278Z" fill="white"/>
<path d="M95.1857 61.5305L95.1696 61.5337L95.1567 61.5401L94.9759 61.618L94.8581 61.6705L94.8839 61.7947L95.0598 62.6682V62.7414L92.4079 63.1074L92.3288 62.8735V60.7047L92.5838 60.6204H95.8071L95.8443 60.5122L95.975 60.1271L95.9831 60.1017V59.8327L95.9669 59.8009L95.8765 59.6132L95.8313 59.5177L91.5589 59.7102L91.5282 59.7118L91.5008 59.7245L91.32 59.8025L91.2022 59.855L91.228 59.9791L91.4055 60.8622V63.8313L91.5153 63.8679L92.0754 64.0557L92.1125 64.0684L92.1496 64.0637L95.0598 63.6531V64.3214H95.6635L95.7071 64.2323L95.9669 63.7088L95.9847 63.6754V61.3459L95.7862 61.3921L95.1857 61.5305Z" fill="white"/>
<path d="M98.2331 54.4228L98.183 54.1555L98.1734 54.1014L98.1314 54.0648L97.9716 53.9264L97.8844 53.8532L97.7844 53.9089L96.2316 54.776L96.2833 54.9033L96.3737 55.1309L96.4076 55.2184L96.5012 55.2311L97.0467 55.3043L97.079 55.2948L98.0701 55.0084L98.1718 54.9797L98.2347 54.4705L98.2379 54.4467L98.2331 54.4228Z" fill="white"/>
</svg>`;

const svgWithId = `<svg width="156" height="78" viewBox="0 0 156 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.8">
<path d="M83.6287 47.7777L86.5519 44.6501L86.1393 43.3507C86.6463 42.7281 87.1396 42.1026 87.6176 41.4771C96.8485 29.3692 105 17.047 105 17.047L83.5023 32.0342L83.6333 32.72C83.6637 32.8756 84.291 36.5758 77.9284 40.3846L77.8584 40.4272L77.7884 40.3846C71.4274 36.5758 72.0531 32.8741 72.0805 32.7361L72.2404 32.0313L51 17C51.0442 17.0705 58.8713 29.3692 68.1038 41.4785C68.5757 42.0982 69.066 42.7193 69.5684 43.336L69.168 44.6516L72.0897 47.7806C71.6344 48.9244 70.2916 51.3193 67.1842 55.4673L67.1354 55.5334C66.5371 56.3307 62.7354 60.9941 62.7324 61L67.5755 58.495C67.7612 58.4011 72.1414 56.1589 77.8599 50.9933C83.58 56.1589 87.9602 58.4011 88.1459 58.495L92.5932 61C92.5932 61 90.2272 57.8049 88.5372 55.4673C86.8472 53.1312 84.0854 48.9215 83.6302 47.7777H83.6287Z" fill="url(#paint0_linear_14356_392)"/>
<path d="M83.6287 47.7777L86.5519 44.6501L86.1393 43.3507C86.6463 42.7281 87.1396 42.1026 87.6176 41.4771C96.8485 29.3692 105 17.047 105 17.047L83.5023 32.0342L83.6333 32.72C83.6637 32.8756 84.291 36.5758 77.9284 40.3846L77.8584 40.4272L77.7884 40.3846C71.4274 36.5758 72.0531 32.8741 72.0805 32.7361L72.2404 32.0313L51 17C51.0442 17.0705 58.8713 29.3692 68.1038 41.4785C68.5757 42.0982 69.066 42.7193 69.5684 43.336L69.168 44.6516L72.0897 47.7806C71.6344 48.9244 70.2916 51.3193 67.1842 55.4673L67.1354 55.5334C66.5371 56.3307 62.7354 60.9941 62.7324 61L67.5755 58.495C67.7612 58.4011 72.1414 56.1589 77.8599 50.9933C83.58 56.1589 87.9602 58.4011 88.1459 58.495L92.5932 61C92.5932 61 90.2272 57.8049 88.5372 55.4673C86.8472 53.1312 84.0854 48.9215 83.6302 47.7777H83.6287ZM77.3819 50.0389C71.6466 55.2676 67.1324 57.5744 67.0882 57.5964L66.7046 57.7902L66.9665 57.4584C66.9665 57.4584 67.3821 56.9298 67.985 56.1266L68.0017 56.1046L68.017 56.0987L68.0352 56.0605C71.811 51.0212 73.7203 47.622 73.2711 46.7366C73.1996 46.5971 73.0641 46.5252 72.8555 46.5164C72.7048 46.512 72.5495 46.5399 72.3515 46.6104L72.2891 46.6324L72.1445 46.4738C71.7197 46.0069 71.2888 45.5194 70.826 44.9805L70.3327 44.4152L70.3479 44.3668C70.3525 44.3491 70.3586 44.333 70.3647 44.3168C70.3692 44.3021 70.3753 44.2875 70.3799 44.2713C70.3921 44.2317 70.4027 44.1994 70.4134 44.1627L70.4271 44.1142L70.4773 44.0995C70.7346 44.0246 71.0117 43.9365 71.3238 43.8323C70.5017 42.8602 69.7024 41.8677 68.9472 40.878C59.7468 28.8083 55.333 21.706 55.2889 21.6355L55.0483 21.2464L71.0696 32.4615L71.0559 32.5203C71.0528 32.532 70.8169 33.6465 71.4563 35.269C72.047 36.7696 73.5299 39.025 77.2372 41.2451L77.2814 41.2715L77.4138 50.011L77.3834 50.0389H77.3819ZM89.0153 57.7902L88.6316 57.5964C88.5875 57.5744 84.0717 55.2662 78.3365 50.0389L78.306 50.011V49.9699L78.4385 41.2715L78.4826 41.2451C82.1975 39.0206 83.6804 36.7593 84.2681 35.2558C84.9015 33.6362 84.6655 32.5335 84.6625 32.5217L84.6488 32.463L84.7005 32.4278L100.673 21.2464L100.433 21.6355C100.388 21.706 95.9746 28.8083 86.7711 40.878C86.016 41.8677 85.2182 42.8602 84.3945 43.8323C84.6944 43.9336 84.9776 44.0232 85.2395 44.0995L85.2882 44.1142L85.3034 44.1612C85.311 44.1847 85.3171 44.2052 85.3247 44.2273L85.3384 44.2728C85.343 44.2889 85.3491 44.3051 85.3537 44.3198C85.3598 44.3359 85.3643 44.3521 85.3689 44.3682L85.3841 44.4167L84.8908 44.982C84.4249 45.5223 83.9941 46.0113 83.5739 46.4738L83.4292 46.6324L83.3668 46.6104C83.1689 46.5413 83.0121 46.512 82.8629 46.5164C82.6543 46.5237 82.5188 46.5957 82.4472 46.7352C81.9996 47.6206 83.9088 51.0198 87.6846 56.0591L87.7029 56.0972L87.7181 56.1031L87.7349 56.1251C88.3378 56.9283 88.7488 57.4525 88.7534 57.4569L89.0153 57.7888V57.7902Z" fill="url(#paint1_linear_14356_392)"/>
<path d="M70.9995 35.4202C70.4865 34.1104 70.5017 33.1164 70.5473 32.6715L56.7383 23.004C58.5607 25.785 62.6897 31.8815 69.34 40.6019C70.115 41.6195 70.9386 42.6414 71.7882 43.6399L71.875 43.7427L72.1368 44.051L71.6192 44.2272C71.3923 44.305 71.1822 44.3726 70.9858 44.4342L71.2005 44.6809C71.639 45.1919 72.047 45.6544 72.4474 46.0964C72.5799 46.0656 72.7017 46.0509 72.822 46.0509C72.8402 46.0509 72.8585 46.0509 72.8768 46.0509C73.3716 46.0685 73.6015 46.3225 73.7081 46.5325C73.9243 46.9598 73.9989 47.8775 72.1642 50.9096C71.0467 52.7553 69.5653 54.8139 68.4965 56.2426C70.2581 55.1545 73.3594 53.0519 76.9312 49.8127L76.8063 41.5314C73.1067 39.2716 71.6085 36.9648 71.0026 35.4187L70.9995 35.4202Z" fill="url(#paint2_linear_14356_392)"/>
<path d="M82.0149 46.5326C82.1199 46.3226 82.3513 46.07 82.8461 46.0524C82.8644 46.0524 82.8827 46.0524 82.9025 46.0524C83.0227 46.0524 83.1445 46.0671 83.277 46.0979C83.6729 45.6604 84.0824 45.1964 84.5224 44.6854L84.7386 44.4373C84.5361 44.3741 84.3245 44.3036 84.1052 44.2288L83.9758 44.1847L83.5876 44.0511L83.8495 43.7442L83.9362 43.6414C84.7858 42.6415 85.6095 41.6195 86.3844 40.6034C93.0347 31.8816 97.1637 25.7865 98.9862 23.0055L85.1756 32.673C85.2212 33.1179 85.2365 34.112 84.7234 35.4217C84.1174 36.9679 82.6193 39.2746 78.9196 41.5344L78.7948 49.8158C82.3665 53.0549 85.4694 55.1575 87.2309 56.2456C86.1621 54.8169 84.6807 52.7568 83.5632 50.9111C81.7286 47.879 81.8032 46.9598 82.0179 46.534L82.0149 46.5326Z" fill="url(#paint3_linear_14356_392)"/>
</g>
<defs>
<linearGradient id="paint0_linear_14356_392" x1="56.745" y1="22.8968" x2="87.6901" y2="60.6499" gradientUnits="userSpaceOnUse">
<stop stop-color="#BE9F56"/>
<stop offset="0.265" stop-color="#C9AF73"/>
<stop offset="0.333333" stop-color="#F3DDB3"/>
<stop offset="0.405" stop-color="#CBB379"/>
<stop offset="0.72" stop-color="#857B62"/>
<stop offset="0.77" stop-color="#F3DDB3"/>
<stop offset="0.833333" stop-color="#C1A35D"/>
<stop offset="1" stop-color="#2B261C"/>
</linearGradient>
<linearGradient id="paint1_linear_14356_392" x1="55.3291" y1="19.3253" x2="83.7713" y2="57.1298" gradientUnits="userSpaceOnUse">
<stop stop-color="#8A1702"/>
<stop offset="0.17" stop-color="#240601"/>
<stop offset="0.445" stop-color="#6B1202"/>
<stop offset="0.705" stop-color="#240601"/>
<stop offset="0.86" stop-color="#771F09"/>
<stop offset="1" stop-color="#240601"/>
</linearGradient>
<linearGradient id="paint2_linear_14356_392" x1="61.8561" y1="20.2782" x2="70.9325" y2="67.0563" gradientUnits="userSpaceOnUse">
<stop/>
<stop offset="0.495" stop-color="#232323"/>
<stop offset="1" stop-color="#161617"/>
</linearGradient>
<linearGradient id="paint3_linear_14356_392" x1="97.6826" y1="27.5883" x2="89.799" y2="56.4936" gradientUnits="userSpaceOnUse">
<stop/>
<stop offset="0.365333" stop-color="#0A0A0B"/>
<stop offset="0.533698" stop-color="#303032"/>
<stop offset="0.63977" stop-color="#202021"/>
<stop offset="1" stop-color="#161617"/>
</linearGradient>
</defs>
</svg>`;

const data = new Array(1000).fill(0).map(() => (Math.random() > 0.5 ? svgWithoutId : svgWithId));

const prefix = 'test';

Test runner

Ready to run.

Testing in
TestOps/sec
Without early return
const clean = (svg) => {
  return svg.replace(/id="([^"]*)"/g, `id="${prefix}-$1"`).replace(/url\(#([^)]*)\)/g, `url(#${prefix}-$1)`);
}

const cleaned = data.map(svg => clean(svg));
ready
With early return
const clean = (svg) => {
  if (svg.includes('id=')) {
  	return svg;
  }
  return svg.replace(/id="([^"]*)"/g, `id="${prefix}-$1"`).replace(/url\(#([^)]*)\)/g, `url(#${prefix}-$1)`);
}

const cleaned = data.map(svg => clean(svg));
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.