JSFiddle - React, Tailwind, and code Playground

Logo Test

by _sir

HTML

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="500 250 820 580">
  <defs>
    <style>
      .gradient {
        fill-rule: evenodd;
        fill: url(#linear-gradient);
      }
    </style>
    <linearGradient id="linear-gradient" x1="914.02" y1="592.43" x2="914.02" y2="336.79" gradientUnits="userSpaceOnUse">
      <stop offset="0.1" class="gradient-color gradient-end" stop-opacity="0"/>
      <stop offset="1" class="gradient-color gradient-start" />
    </linearGradient>
  </defs>
  <title>logo</title>
  <g>
    <path class="gradient"...

CSS

body {
  background: white;
}

.line {
  fill: #3345a1; 
}

.gradient {
  /* Change this to "inherit" or "none" to toggle the gradient */
  display: inherit;
}

.gradient-color {
  stop-color: #3345a1;
}

.text {
  fill: black;
}

svg {
  width: 40%;
}