Doc_McStabbins Posted July 14, 2020 Share Posted July 14, 2020 (edited) 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. Edited July 14, 2020 by Doc_McStabbins including file and additional info. Istanicas 1 Link to comment Share on other sites More sharing options...
KwarkM Posted July 27, 2020 Share Posted July 27, 2020 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 Doc_McStabbins 1 Link to comment Share on other sites More sharing options...
Deaders Posted August 20, 2020 Share Posted August 20, 2020 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 Doc_McStabbins 1 Link to comment Share on other sites More sharing options...
Doc_McStabbins Posted December 4, 2020 Author Share Posted December 4, 2020 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 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! Deaders 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now