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)
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">