Jump to content

Assistance with SVG? Can't get White...


Recommended Posts

Hello there, I've almost got the SVG for my organization figure out, but I can't seem to get the logo to be white on a black background... The code is below. I've tried everything in my limited knowledge, but it always either turns the logo portions black or makes the background white instead of the logo. Not sure what I'm doing wrong.

 

<svg viewBox="0 0 300 300">
<g transform="translate(0.000000,292.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 1460 l0 -1460 1500 0 1500 0 0 1460 0 1460 -1500 0 -1500 0 0
-1460z m1673 1053 c79 -309 271 -1046 364 -1403 l38 -145 408 -3 c224 -1 407
-4 407 -7 0 -13 -52 -140 -85 -205 -131 -264 -375 -514 -621 -638 l-62 -31 -5
22 c-3 12 -77 297 -165 632 -88 336 -224 859 -303 1163 -97 376 -146 548 -151
535 -5 -10 -60 -218 -124 -463 -357 -1379 -487 -1876 -491 -1883 -13 -21 -238
123 -361 231 -159 140 -322 384 -393 589 l-18 53 409 0 409 0 10 38 c11 41
319 1227 382 1472 22 85 49 187 59 225 10 39 24 89 30 113 l11 42 82 0 82 0
88 -337z m-462 221 l-26 -95 -87 -29 c-427 -143 -743 -492 -846 -934 -22 -96
-25 -133 -25 -276 0 -91 5 -187 10 -213 l11 -48 -92 3 -91 3 -8 55 c-13 87 -2
414 17 497 63 277 198 524 390 718 155 156 311 260 501 335 64 26 237 77 266
80 3 0 -6 -43 -20 -96z m698 59 c389 -111 732 -401 905 -766 126 -266 166
-524 129 -834 l-6 -53 -89 0 -89 0 8 63 c4 34 8 130 8 212 -1 220 -32 351
-130 550 -99 201 -255 377 -444 501 -108 70 -174 102 -296 144 l-80 27 -27 94
c-15 52 -28 95 -28 97 0 3 41 -7 139 -35z"/>
<path d="M384 773 c28 -71 171 -247 279 -341 102 -89 104 -90 117 -45 27 98
100 382 100 392 0 8 -71 11 -251 11 -230 0 -251 -1 -245 -17z"/>
<path d="M2124 773 c3 -10 28 -106 56 -213 28 -107 52 -199 53 -204 4 -13 150
108 212 177 57 63 175 230 175 248 0 5 -102 9 -251 9 -234 0 -250 -1 -245 -17z"/>
</g>
</svg>

 

Ultimately, it should look like the attached file. However, the white part ends up colorless. I can tell what's happening, the only color declared is for the background, so the foreground is transparent, but I can't seem to figure out how to reverse it. I don't mind it being "white on transparent" instead of just strictly Black and White. White on transparent would probably be ideal in fact, if this is what will be painted onto space ships and stations, etc.

 

 

OPA.png

Edited by Doc_McStabbins
including file and additional info.
Link to comment
Share on other sites

  • 2 weeks later...

you could try adding a rectangle in the background by adding

<rect fill="white" height="3000" width="3000"/>

between the translate and the first path.

since i'm not very good with svg too there might be better way but this worked for me

Link to comment
Share on other sites

  • 4 weeks later...

Hey Doc,

Thought I'd sit down and make your SVG a little bit more simple.

 

<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
 <defs>
 	<!-- Do not change the colour in these masks -->
    <mask id="mask1" x="0" y="0" width="512" height="512" >
      <ellipse ry="256" rx="256" cy="256" cx="256" fill="#fff"/>
      <ellipse ry="226" rx="226" cy="256" cx="256" fill="#000"/>
  	  <rect height="30" width="160" y="300" x="0" fill="#000"/>
  	  <rect height="30" width="160" y="300" x="352" fill="#000"/>
  	  <rect transform="rotate(-15 256,256) " height="80" width="30" y="0" x="341" fill="#000"/>
  	  <rect transform="rotate(15 256,256) " height="80" width="30" y="0" x="141" fill="#000"/>
  	  <rect height="80" width="256" y="440" x="128" fill="#000"/>
    </mask>
    <mask id="mask2" x="0" y="0" width="512" height="512" >
      <ellipse ry="300" rx="300" cy="256" cx="256" fill="#000"/>
      <ellipse ry="256" rx="256" cy="256" cx="256" fill="#fff"/>
    </mask>
 </defs>
 <g>
  <!-- Change all the fill colours below this to #000 to get the image in black, (or any other colour for that matter) -->
  <ellipse ry="256" rx="256" cy="256" cx="256" fill="#fff" style="mask: url(#mask1)"/>
  <rect transform="rotate(-15 256,256) " height="512" width="30" y="0" x="311" fill="#fff" style="mask: url(#mask2)"/>
  <rect transform="rotate(15 256,256) " height="512" width="30" y="0" x="171" fill="#fff" style="mask: url(#mask2)"/>
  <rect height="30" width="160" y="330" x="0" fill="#fff" style="mask: url(#mask2)"/>
  <rect height="30" width="160" y="330" x="352" fill="#fff" style="mask: url(#mask2)"/>
 </g>
</svg>

 

Its has a transparent background, hope this helps!
If you want it changed, feel free to drop me a message on discord.

What I've done here, is instead of drawing the shape from lines and points, I've used geometric shapes to construct the logo. And then used "masked" them using other "helper" shapes to cut out the actual logo shape.

 

Enjoy! And fly safe!

 

EDIT: Just realised how old this thread is, well hope its still useful to someone :D

Link to comment
Share on other sites

  • 3 months later...
On 8/20/2020 at 2:50 AM, Deaders said:

Hey Doc,

Thought I'd sit down and make your SVG a little bit more simple.

 


<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
 <defs>
 	<!-- Do not change the colour in these masks -->
    <mask id="mask1" x="0" y="0" width="512" height="512" >
      <ellipse ry="256" rx="256" cy="256" cx="256" fill="#fff"/>
      <ellipse ry="226" rx="226" cy="256" cx="256" fill="#000"/>
  	  <rect height="30" width="160" y="300" x="0" fill="#000"/>
  	  <rect height="30" width="160" y="300" x="352" fill="#000"/>
  	  <rect transform="rotate(-15 256,256) " height="80" width="30" y="0" x="341" fill="#000"/>
  	  <rect transform="rotate(15 256,256) " height="80" width="30" y="0" x="141" fill="#000"/>
  	  <rect height="80" width="256" y="440" x="128" fill="#000"/>
    </mask>
    <mask id="mask2" x="0" y="0" width="512" height="512" >
      <ellipse ry="300" rx="300" cy="256" cx="256" fill="#000"/>
      <ellipse ry="256" rx="256" cy="256" cx="256" fill="#fff"/>
    </mask>
 </defs>
 <g>
  <!-- Change all the fill colours below this to #000 to get the image in black, (or any other colour for that matter) -->
  <ellipse ry="256" rx="256" cy="256" cx="256" fill="#fff" style="mask: url(#mask1)"/>
  <rect transform="rotate(-15 256,256) " height="512" width="30" y="0" x="311" fill="#fff" style="mask: url(#mask2)"/>
  <rect transform="rotate(15 256,256) " height="512" width="30" y="0" x="171" fill="#fff" style="mask: url(#mask2)"/>
  <rect height="30" width="160" y="330" x="0" fill="#fff" style="mask: url(#mask2)"/>
  <rect height="30" width="160" y="330" x="352" fill="#fff" style="mask: url(#mask2)"/>
 </g>
</svg>

 

Its has a transparent background, hope this helps!
If you want it changed, feel free to drop me a message on discord.

What I've done here, is instead of drawing the shape from lines and points, I've used geometric shapes to construct the logo. And then used "masked" them using other "helper" shapes to cut out the actual logo shape.

 

Enjoy! And fly safe!

 

EDIT: Just realised how old this thread is, well hope its still useful to someone :D

Wow! Thank you very very much! I had actually given up on a hope of an answer, and I actually completely forgot about Dual Universe... much less that I eventually wanted to get the Belters going.

 

Woot! Thank you again!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...