How to fill a specific vector/svg image?-CodePudding

I do have an Android app with an icon for my Splash Screen. It is a simple logo with a background color in it that will change if the to black or white by following Android Theme. I wanted the "R" in the logo to be white instead of transparent (ONLY the R).

(Is it possible to create a white square behind of the logo or something like this?)

the logo in .xml -> https://pastebin.com/GLDjk9Y1
the logo in .svg -> https://pastebin.com/9kyE4cir

CodePudding user response：

The 'R' in your logo doesn't actually exist as a shape. It only exists as a hole between the two <path> shapes in your SVG.

The first path is the purple shape around the outside.
The second path is the small purple patch in the loop of the 'R'

You could fix this by loading the SVG into a vector editor and doing some path splitting and merging operations. If you have more than one logo you need to fix, then that is what you will need to do.

But here is a manually edited version of your logo, if that is all you need.

svg path:nth-child(2) {
  fill: red;
}

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="1000.000000pt" height="1000.000000pt" viewBox="0 0 1000.000000 1000.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)"
fill="#7659b0" stroke="none">
<path d="M1576 9489 c-160 -17 -340 -77 -476 -159 -117 -70 -180 -121 -273
-221 -183 -195 -291 -439 -317 -714 -8 -75 -10 -1183 -8 -3475 l4 -3365 21
-90 c60 -251 161 -435 332 -606 175 -176 381 -286 628 -336 84 -17 264 -18
3513 -18 3249 0 3429 1 3513 18 247 50 453 160 628 336 176 175 282 375 335
626 18 87 19 196 19 3515 0 3319 -1 3428 -19 3515 -53 251 -159 451 -335 626
-173 174 -366 278 -625 337 -65 15 -364 16 -3466 18 -1867 1 -3430 -2 -3474
-7z"/>
<path d="M5200 7450 c706 -81 1213 -495 1375 -1123 44 -170 54 -255 54 -452 0
-138 -4 -200 -18 -265 -97 -447 -410 -832 -863 -1063 -96 -49 -103 -54 -103
-82 0 -23 142 -233 645 -950 526 -752 644 -926 645 -952 l0 -33 -619 0 -619 0
-623 890 -623 890 -148 0 -148 0 0 -890 0 -890 -540 0 -540 0 0 2465 0 2465
1018 0 c630 0 1051 -4 1107 -10z M4160 5885 l0 -587 453 5 c504 5 521 7 651 75 128 67 229 191 272
337 22 74 25 245 5 325 -23 96 -80 200 -146 265 -72 71 -136 108 -242 137 -73
20 -106 22 -535 26 l-458 4 0 -587z" fill="white"/>
</g>
</svg>

In this version:

the first path is the rounded purple background square
the second path is the 'R'

I've included some CSS to prove the 'R' is now stylable.