Grow your CSS skills. Land your dream job.

Style svg?

  • # March 21, 2013 at 3:40 pm

    In fact, you can: http://codepen.io/anon/pen/KoIrg

    # March 21, 2013 at 3:42 pm

    @Paulie_D, no hover though? I can’t seem to figure it out, I’ve been trying on both of your pens…I have no experience with SVG though

    # March 21, 2013 at 3:44 pm

    Hover…sure.

    Codepen updated.

    # March 21, 2013 at 3:46 pm

    Oh, I see..I was trying to use SCSS, force of habit for CodePen these days.

    # March 23, 2013 at 6:40 pm

    Still unable to get this to work…

    I’m currently importing the svg code as background data in css

    and for my code, I am using

    .logo {
    background: url(data:image/svg+xml;base64,[data]);
    }

    with the codefish code in place of the “[data]“

    With my actual svg data before mobilefish




    # March 24, 2013 at 12:03 pm

    no ideas here?

    # March 24, 2013 at 12:44 pm

    @wragen22 Let me try to understand your problem. You want to add a different color on hover with a transition to your SVG?

    # March 24, 2013 at 5:01 pm

    Yes, but using a class in my stylesheet

    # March 25, 2013 at 7:40 am

    If the SVG is a **background** image then I don’t think you can change the ‘svg properties’ of the image with a hover state.

    Hover states only apply to elements and the SVG (as far as I can see from your small amount of code) is not a page element.

    # March 25, 2013 at 7:58 am

    So unless the SVG is being used as an element (or whatever you want to call it), I don’t see a way of doing this. I’m not even sure if the browser support is all that great either so that might be something to look into.

    # March 25, 2013 at 6:04 pm

    @Pauli_D The thing is I am importing background data svg, not image following Chris’ article here: http://css-tricks.com/using-svg/ and with the pen mentioned above It makes me think it is possible…
    http://codepen.io/anon/pen/KoIrg

    # March 25, 2013 at 6:36 pm

    The issue is that the SVG (however it’s created) is a background image and that’s a property.

    You can’t style a property only an element.

    You can style the SVG if it’s element in the HTML….not in the CSS.

    Oh….and that’s my Codepen…where the SVG is in the HTML.

    # March 25, 2013 at 7:35 pm

    @Paulie_D ok… :-/ I guess looking at Chris’ example in this post here, a bit down the page, makes me think i’m close…

    http://css-tricks.com/workshop-notes-webstock-13/

    # March 25, 2013 at 10:29 pm

    Ok, I’ve been able to style following Chris Coyer’s example. http://css-tricks.com/using-svg/

    First by importing the svg via php

    < ?php include("svgs/text.svg"); ?>

    Then in my optimized svg I gave it a class

    Then in my css I did the following.

    .svg {
    height: 500px;
    width: 500px;
    margin: auto;
    fill: #e95b59;
    &:hover {
    fill: #4a4a4a;
    }
    }

    My question now is , is this the best way? Am I missing something? Maybe I should use images and 2x for retina?

    # March 26, 2013 at 6:24 am

    >Maybe I should use images and 2x for retina?

    SVG is a vector so it’s as big as it needs to be….that’s the whole point…it’s retina ready.

    As for your method that will affect all elements with a class of .svg. **So, if there is only one SVG element with that class (or they are all the same)** IN YOUR HTML then it’s fine…I suppose.

Viewing 15 posts - 16 through 30 (of 31 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".