search

valeriebordeleau / portfolio-valerie-bordeleau

personal portfolio site
0 stars 0 forks source link

Svg Saving Issues #34

Closed valeriebordeleau closed 8 years ago

valeriebordeleau commented 8 years ago

@thomasjbradley I'm having some issues saving out svg's, I went back and followed your video just to double check my settings and they match up. However every time I save out an svg extra padding is added to the bottom of the file that didn't exist in illustrator. I've tried using SVGOMG on it after to see if compressing it would make any difference and also selecting the "use artboards" check box when saving. Nothing is making a difference. Any suggestions? Thank-you

In Finder/How it looks coded: screen shot 2016-02-29 at 9 32 05 am

How it looks in illustrator: screen shot 2016-02-29 at 9 46 45 am

thomasjbradley commented 8 years ago

Is it just in Finder that you're seeing the extra space or in your website too? Because Finder always seems to add extra space to the bottom of its preview.

valeriebordeleau commented 8 years ago

On my site as well. I tried to use the svg to make an iconic font and the icon had the extra apace as well

valeriebordeleau commented 8 years ago

screen shot 2016-02-29 at 11 52 43 am

thomasjbradley commented 8 years ago

Can I see the code?

valeriebordeleau commented 8 years ago

I added the weird svg to the 404 page (so I didn't wreck the homepage)

404.html Line 11: <i class="portfolio-wordmark-for-web name"></i>

thomasjbradley commented 8 years ago

Hmm... It must be something to do with it matching the font metrics of the other letters in the icon font. I don't have much experience with generating icon fonts—I generally avoid them and use something else instead.

valeriebordeleau commented 8 years ago

I chose to use it because the svg hover state styling wasn't working in chrome. Do you think that creating a second iconic font and linking that would work? or would that be too heavy and slow load times too much?

thomasjbradley commented 8 years ago

Yeah, a second font may work well, but you're right that it'll likely slow down your website. Do some performance testing with the second font and see how bad it is.

valeriebordeleau commented 8 years ago

Okay. Will do. I'm really not sure why the hover state stopped working in chrome. I swapped out my logo for an updated version and the hover state stopped working. All of the code remained the same. On the project pages the logo stays black in chrome rather than white with a hover state

thomasjbradley commented 8 years ago

Possibly the colour of black is embedded in the SVG itself instead of referring to CSS. Look for a fill="" in the SVG.

valeriebordeleau commented 8 years ago

No luck with that. No fill on it.

valeriebordeleau commented 8 years ago

I tried using a second iconic font family and the extra space is still there. The error seems to be with the file itself.

thomasjbradley commented 8 years ago

Maybe come to my office hours next week so I can look. Or ask me in the grad class.

I feel like we should be able to make it work without the custom font, just as an SVG.

valeriebordeleau commented 8 years ago

sounds like a plan. I'll aim for your Tuesday hours if you're busy in class. I'm sure it's just a weird setting or something. Honestly I'm most concerned about my forwarder not working (I just tried it again), as its my only contact info on the grad site/my site aside from social media. What room number is your office?

thomasjbradley commented 8 years ago

What room number is your office?

J104

valeriebordeleau commented 8 years ago

thanks