0

I'm very new to svg and adobe illustrator and I'm struggling with it. I want to create a svg logo wich is tranparant but the outline is filled. I want to use it to scale up on scroll

Here is an example what I mean

enter image description here

Thank you very much for your time and help.

The link to the site is https://phive.pt/

Improve this question
3
  • Hi Dario, welcome to GD.SE and thanks for your question. We'd really appreciate an image of your intended effect next to (or instead of) the link to the site, which looks rather spammy. You can edit your post to include an image. Thanks! Do have a look at the tour and the help center to understand the Stack Exchange format and what is on and off topic on this site.
    – Vincent
    Commented Nov 10, 2017 at 14:14
  • Thank you for your help, I removed the link and added the screenshot
    – Dario
    Commented Nov 10, 2017 at 14:26
  • 1
    You shouldn't have removed the link entirely - because that's the only way we can find out what's going on. You can disable a link by highlighting it as code, so it doesn't; look so spammy. I've added it back in case someone can tell you how they've implemented it on the site.
    – Billy Kerr
    Commented Nov 10, 2017 at 14:44

1 Answer 1

Reset to default
3

The SVG isn't reversed. It's just a regular SVG - a letter-form with a black fill.

You can see the SVG here (direct link to SVG)

The effect is created by other means - I suspect javascript/css/html5 etc, etc.

And just in case the link dies, here's the code. And a screenshot.

<?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="260.000000pt" height="260.000000pt" viewBox="0 0 260.000000 260.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,260.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1167 2304 c-1 -1 -114 -5 -252 -8 -137 -4 -279 -9 -315 -12 -104 -8
-153 -12 -186 -13 l-31 -1 0 -199 0 -199 30 -6 c16 -3 40 -6 52 -6 l23 0 -2
-576 -1 -577 -40 -4 c-22 -2 -45 -5 -51 -7 -8 -3 -12 -63 -11 -200 0 -192 0
-196 21 -197 31 -1 788 -1 808 0 14 1 16 22 16 199 1 146 -2 199 -11 200 -7 1
-25 3 -42 5 -16 2 -35 5 -41 5 -8 1 -11 38 -10 112 l1 109 215 5 c118 2 231 7
250 11 213 37 299 66 401 135 118 81 201 217 226 376 10 61 10 275 0 329 -23
124 -72 222 -151 300 -110 109 -252 166 -501 201 -61 8 -392 23 -398 18z m353
-469 c95 -38 129 -101 125 -231 -6 -173 -104 -232 -380 -228 -60 1 -117 3
-126 3 -14 1 -16 27 -16 234 0 127 2 236 5 241 2 5 82 6 176 4 132 -4 181 -9
216 -23z"/>
</g>
</svg>

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.