SVGR doesn't display colors from my SVG
Hi,
I have an svg file which I want to display on my website.
The svg has a linearGradient but when I add it to my code and display it, I only see the svg black without the lineargradient which is defiend.
So in my vite.config.ts file I imported the svgr
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from "vite-plugin-svgr";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
svgr(),
],
})
I created a svgr.config.js file with the content below
// svgr.config.js
module.exports = {
svgoConfig: {
plugins: {
removeViewBox: false,
},
},
};
Afterwards I import it and display it in my div import { ReactComponent as Logo } from "../assets/svg/logo.svg"
Afterwards I import it and display it in my div import { ReactComponent as Logo } from "../assets/svg/logo.svg"
Vite
Next Generation Frontend Tooling
2 Replies
Below I send you the svg code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:odm="http://product.corel.com/CGS/11/cddns/" xmlns:corel-charset="http://product.corel.com/CGS/11/cddns/" xml:space="preserve" width="3.70079in" height="2.12598in" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd"
viewBox="0 0 3700 2126">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:url(#id0)}
]]>
</style>
<linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="1644" y1="1246" x2="1777" y2="1131">
<stop offset="0" style="stop-color:#C29439"/>
<stop offset="0.14902" style="stop-color:#D9B879"/>
<stop offset="0.301961" style="stop-color:#765713"/>
<stop offset="0.509804" style="stop-color:#FFE69F"/>
<stop offset="0.721569" style="stop-color:#906420"/>
<stop offset="0.870588" style="stop-color:#D9BB7B"/>
<stop offset="1" style="stop-color:#906210"/>
</linearGradient>
</defs>
<g id="Warstwa_x0020_1">
<path class="fil0" d=" ...."/>
</g>
</svg>
instead of d="..." here is the code
d="M1712 1205c15,-2 20,-20 9,-30 -3,-2 -7,-4 -13,-4 -22,3 -18,37 4,34zm22 -46c-7,1 -5,11 2,10 7,-2 5,-12 -2,-10zm-66 2l-1 45c0,10 2,18 12,23 6,3 13,2 20,2 8,0 15,0 23,0 10,0 19,2 27,-7 4,-6 5,-11 5,-17l-1 -47c-3,-7 -8,-13 -16,-14l-56 0c-5,1 -12,10 -13,15zm73 -8c-5,-3 -10,-2 -17,-3 -11,0 -26,0 -37,1 -6,0 -9,4 -11,7 -4,5 -3,10 -3,16l0 28c0,6 -1,11 2,16 5,8 13,8 21,8l28 0c9,0 16,0 21,-8 3,-5 3,-9 3,-16l0 -28c0,-7 1,-16 -7,-21zm-33 12c-12,2 -22,12 -20,26 1,11 11,21 25,20 17,-2 25,-21 17,-34 -4,-8 -13,-13 -22,-12zm2 -52c11,0 20,2 29,5 10,4 18,10 25,17 14,14 22,33 22,54 0,10 -2,20 -6,28 -3,10 -9,18 -16,25 -7,7 -15,13 -25,17 -9,3 -18,5 -29,5 -10,0 -20,-2 -29,-5 -9,-4 -17,-10 -24,-17 -7,-7 -13,-15 -17,-25 -3,-8 -5,-18 -5,-28 0,-11 2,-21 5,-29 4,-10 10,-18 17,-25 13,-14 32,-22 53,-22z"
Svgo can mess with IDs so if there is CSS inside the SVG that is dependent on the IDs it will break. You have 2 options. 1) Svgo config in the webpack config, make sure it doesn't change/namespace IDs. 2) don't make it an inline SVG load it into the src of an img element. Not sure if this will run into the same problem tbh but worth a try.
Check in a browser I bet when you inspect the SVG the IDs are all different.