SVG Invert Colors-CodePudding

So, I'm trying to make a Reactjs website

(I am a beginner)

and I am using a SVG image for a logo. I recently turned the base color for my website to black, and I can't see my icon anymore... (This is based on a Udemy course)

I've tried to download other white colored SVG images, but it wouldn't show on the app. I have also tried modifying the HTML5 SVG code, but that eventually failed. And I also tried making an SVG of my own, but in order to download it, I have to pay...

Here's my code for the SVG:

<?xml version="1.0" encoding="iso-8859-1"?>
<!--Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)-->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 407.453 407.453" style="enable-background:new 0 0 407.453 407.453" xml:space="preserve">
  <g>
    <path style="fill:#010002" d="M255.099,116.515c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H143.486
        c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129H255.099z"/>
    <path style="fill:#010002" d="M367.062,100.258H311.69c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129h47.243
        v274.681H48.519V116.515h44.536c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H40.391
        c-4.487,0-8.129,3.633-8.129,8.129v290.938c0,4.495,3.642,8.129,8.129,8.129h326.671c4.487,0,8.129-3.633,8.129-8.129V108.386
        C375.191,103.891,371.557,100.258,367.062,100.258z"/>
    <path style="fill:#010002" d="M282.59,134.796c4.487,0,8.129-3.633,8.129-8.129V67.394C290.718,30.238,250.604,0,201.101,0
        c-49.308,0-89.414,30.238-89.414,67.394v59.274c0,4.495,3.642,8.129,8.129,8.129s8.129-3.633,8.129-8.129V67.394
        c0-28.198,32.823-51.137,73.36-51.137c40.334,0,73.157,22.939,73.157,51.137v59.274
        C274.461,131.163,278.095,134.796,282.59,134.796z"/>
    <path style="fill:#010002" d="M98.892,147.566c0,11.526,9.389,20.907,20.923,20.907c11.534,0,20.923-9.38,20.923-20.907
        c0-4.495-3.642-8.129-8.129-8.129s-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.569,0-4.666-2.089-4.666-4.65
        c0-4.495-3.642-8.129-8.129-8.129S98.892,143.071,98.892,147.566z"/>
    <path style="fill:#010002" d="M282.59,168.473c11.534,0,20.923-9.38,20.923-20.907c0-4.495-3.642-8.129-8.129-8.129
        c-4.487,0-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.577,0-4.666-2.089-4.666-4.65
        c0-4.495-3.642-8.129-8.129-8.129c-4.487,0-8.129,3.633-8.129,8.129C261.667,159.092,271.055,168.473,282.59,168.473z"/>
  </g>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
</svg>

I want to turn this SVG image outline to white, and the insides of the image to black. Please help. (Possibly just modify the HTML5 SVG code? I don't want to implement other files into producing the needed result)

CodePudding user response：

SVG is easy to understand. You see these "fill: #010002"-Thingys in every single path-element? Turn them to "fill: #ffffff" if you want to turn the whole insides white. What you need might be the "stroke"-Property as shown below. If this is too thin for you, also add the "stroke-width" with a simple Number as a value.

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
    y="0px" viewBox="0 0 407.453 407.453" style="enable-background:new 0 0 407.453 407.453" xml:space="preserve">
    <g>
        <path style="fill:#010002; stroke:#ffffff" d="M255.099,116.515c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H143.486
        c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129H255.099z" />
        <path style="fill:#010002; stroke:#ffffff" d="M367.062,100.258H311.69c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129h47.243
        v274.681H48.519V116.515h44.536c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H40.391
        c-4.487,0-8.129,3.633-8.129,8.129v290.938c0,4.495,3.642,8.129,8.129,8.129h326.671c4.487,0,8.129-3.633,8.129-8.129V108.386
        C375.191,103.891,371.557,100.258,367.062,100.258z" />
        <path style="fill:#010002; stroke:#ffffff" d="M282.59,134.796c4.487,0,8.129-3.633,8.129-8.129V67.394C290.718,30.238,250.604,0,201.101,0
        c-49.308,0-89.414,30.238-89.414,67.394v59.274c0,4.495,3.642,8.129,8.129,8.129s8.129-3.633,8.129-8.129V67.394
        c0-28.198,32.823-51.137,73.36-51.137c40.334,0,73.157,22.939,73.157,51.137v59.274
        C274.461,131.163,278.095,134.796,282.59,134.796z" />
        <path style="fill:#010002; stroke:#ffffff" d="M98.892,147.566c0,11.526,9.389,20.907,20.923,20.907c11.534,0,20.923-9.38,20.923-20.907
        c0-4.495-3.642-8.129-8.129-8.129s-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.569,0-4.666-2.089-4.666-4.65
        c0-4.495-3.642-8.129-8.129-8.129S98.892,143.071,98.892,147.566z" />
        <path style="fill:#010002; stroke:#ffffff"
            d="M282.59,168.473c11.534,0,20.923-9.38,20.923-20.907c0-4.495-3.642-8.129-8.129-8.129
        c-4.487,0-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.577,0-4.666-2.089-4.666-4.65
        c0-4.495-3.642-8.129-8.129-8.129c-4.487,0-8.129,3.633-8.129,8.129C261.667,159.092,271.055,168.473,282.59,168.473z" />
    </g>
</svg>

You even could delete all the definitions inline and just style the group-element , turning it into:

<g style="fill:#010002; stroke:#ffffff; stroke-width: 4">

CodePudding user response：

Here is the snippet with the icon fill turned to white and the svg background set to black:

<svg style="background-color:black" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 407.453 407.453" style="enable-background:new 0 0 407.453 407.453" xml:space="preserve">
  <g>
    <path style="fill:#FFFFFF" d="M255.099,116.515c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H143.486
        c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129H255.099z"/>
    <path style="fill:#FFFFFF" d="M367.062,100.258H311.69c-4.487,0-8.129,3.633-8.129,8.129c0,4.495,3.642,8.129,8.129,8.129h47.243
        v274.681H48.519V116.515h44.536c4.487,0,8.129-3.633,8.129-8.129c0-4.495-3.642-8.129-8.129-8.129H40.391
        c-4.487,0-8.129,3.633-8.129,8.129v290.938c0,4.495,3.642,8.129,8.129,8.129h326.671c4.487,0,8.129-3.633,8.129-8.129V108.386
        C375.191,103.891,371.557,100.258,367.062,100.258z"/>
    <path style="fill:#FFFFFF" d="M282.59,134.796c4.487,0,8.129-3.633,8.129-8.129V67.394C290.718,30.238,250.604,0,201.101,0
        c-49.308,0-89.414,30.238-89.414,67.394v59.274c0,4.495,3.642,8.129,8.129,8.129s8.129-3.633,8.129-8.129V67.394
        c0-28.198,32.823-51.137,73.36-51.137c40.334,0,73.157,22.939,73.157,51.137v59.274
        C274.461,131.163,278.095,134.796,282.59,134.796z"/>
    <path style="fill:#FFFFFF" d="M98.892,147.566c0,11.526,9.389,20.907,20.923,20.907c11.534,0,20.923-9.38,20.923-20.907
        c0-4.495-3.642-8.129-8.129-8.129s-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.569,0-4.666-2.089-4.666-4.65
        c0-4.495-3.642-8.129-8.129-8.129S98.892,143.071,98.892,147.566z"/>
    <path style="fill:#FFFFFF" d="M282.59,168.473c11.534,0,20.923-9.38,20.923-20.907c0-4.495-3.642-8.129-8.129-8.129
        c-4.487,0-8.129,3.633-8.129,8.129c0,2.561-2.089,4.65-4.666,4.65c-2.577,0-4.666-2.089-4.666-4.65
        c0-4.495-3.642-8.129-8.129-8.129c-4.487,0-8.129,3.633-8.129,8.129C261.667,159.092,271.055,168.473,282.59,168.473z"/>
  </g>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
  <g/>
</svg>

Note that you might not even need to have the background-color on the SVG be set to black, as the background is transparent and if your website is already dark you can delete the style="background-color:black" attribute in the root svg tag.