Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialAurelian Spodarec
10,801 PointsMaking image white
How can I make this specific immage white? but with the background transparent as it is?
Can I write some CSS so it adds a layer only where is the svg black? Or how can i achieve this with sketch? I got it but i don't have time to invest 10hours to learn it and I really focus on web development, but I got an idea so i need that kind of shape, a similar one.
Or are there any websites that have these shapes?
2 Answers
Kallil Belmonte
35,561 PointsSVG is just code, so to change the image you need to change the code (applying CSS for example). And as HTML you can do it inline or with a style tag at the top of the code.
INLINE
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-444 1590.9 371.5 46.2" style="enable-background:new -444 1590.9 371.5 46.2;" xml:space="preserve">
<g>
<path fill="#ffffff" d="M-403.4,1621.2c6.4-1.5,11-6.5,17.5-7.6c8.6-1.4,17.5,2.8,24,8.1c6.4,5.2,11.6,12.5,20.9,9c11.2-4.3,12.7-22.6,27.5-18.8
c11.2,2.9,16.1,17.3,28.4,18.4c21,1.9,23.6-35.9,48.3-23.7c16.7,8.2,25.2,26.4,44.8,29.6c13.8,2.2,28.7,0.3,41.1-6.4
c12.9-7,19.1-22.8,32.4-28.3c14.2-5.9,29.6,2.7,42.6-7.6c1.2-0.9,2.3-2,3.4-3H-444C-433.7,1606.5-420.6,1625.2-403.4,1621.2z"/>
</g>
</svg>
STYLE TAG
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-444 1590.9 371.5 46.2" style="enable-background:new -444 1590.9 371.5 46.2;" xml:space="preserve">
<style>
path {fill: #ffffff;}
</style>
<g>
<path d="M-403.4,1621.2c6.4-1.5,11-6.5,17.5-7.6c8.6-1.4,17.5,2.8,24,8.1c6.4,5.2,11.6,12.5,20.9,9c11.2-4.3,12.7-22.6,27.5-18.8
c11.2,2.9,16.1,17.3,28.4,18.4c21,1.9,23.6-35.9,48.3-23.7c16.7,8.2,25.2,26.4,44.8,29.6c13.8,2.2,28.7,0.3,41.1-6.4
c12.9-7,19.1-22.8,32.4-28.3c14.2-5.9,29.6,2.7,42.6-7.6c1.2-0.9,2.3-2,3.4-3H-444C-433.7,1606.5-420.6,1625.2-403.4,1621.2z"/>
</g>
</svg>
Kallil Belmonte
35,561 PointsThe website was beautiful, but these divisors images are a little blurry to me, so when I did look at it, I saw that you used .png instead of .svg, well... I really encourage you to use svg always when it is possible to deal with graphics/illustrations, because they will never get blurry, and you don't need to worry with Retina screens... ; )
Aurelian Spodarec
10,801 PointsThe divisors.. well, i just had to get any :D ill try what you told me and ill see if it will work. Thanks you :)
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 Pointslol some advanced stuff :D tahnk you, i managed to do the effect somehow with something but btw, think this is good? :D
https://github.com/AurelianSpodarec/hcchristmasite/tree/gh-pages
and here is the site :D https://aurelianspodarec.github.io/hcchristmasite/