Forums

wragen22

Hi folks, I have seen several posts on how to style svg's, but i'm not quite understanding for my situation.

I have some svg images that is simply text. I am exploring avoiding web fonts because of rendering issues. I am trying to style these svg's by dropping them into the html and styling in css, but this is not working. Can someone help me achieve this?

Here is what i'm trying - In my HTML:

     <div class="style">
      <img class="style" src="../folder/image.svg" alt="svg">
    </div>

CSS:

    .style {
    margin: 40px auto 40px;
    width: 200px;
    height: 100px;
    fill: #e05f5a;
    &:hover {
    @include transition(#4a4a4a .1s ease);
    fill: #4a4a4a;
    }

Paulie_D

Is it the transition not working or the color change?

The transition won't work I would assume because (I think) it should be

      transition: (fill .1s ease);

No?

ChrisP

I'm not sure about styling SVG's, but @Paulie_D is right, and it should be the property in the transition, rather than the color. I'd also recommend taking the transition out of the hover, and putting it in .style so it has a smooth transition in and out of the hover state.

Paulie_D

It's also odd that the containing div AND the svg have the same class...isn't it?

wragen22

Yes, it is the color change I am having issues with. And for the containing div and the svg, I have been struggling with this as well. For some reason If I were to only leave one class, say for the containing div and nothing for the svg, nothing shows up. However, when I placed the class in both section the svg does show up properly.... :-/

Paulie_D

So if you try

    svg.style {
       fill: xxxxxxx;
    }

** note...no spaces **

nothing happens to the fill?

wragen22

so you recommend in my css file changing to svg.style { } ?

Paulie_D

Dunno...does it work if you do?

svg.style /* no space */

will only select svg elements that have a class of style...the div element won't be selected at all.

svg .style /* with space */

will select elements with a class of style inside svg elements...and that's not what you want.

ChrisP

** img.style, since it's an img element after all..

Paulie_D

** img.style, since it's an img element after all..

Oops...you are right!

In that case...it won't work at all....it's just an image.

You can only apply the fill to SVG elements.

Doh!

This...

      <img class="style" src="../folder/image.svg" alt="svg">

is not the same as

   <svg class="style>
    some properties
   </svg>

wragen22

Interesting... so how might I be able to apply css properties to the svg? Hover ease ect?

Paulie_D

You have to use the SVG element...not an image element.

http://codepen.io/Paulie-D/pen/nxrCK

ChrisP

@wragen22, you'd have to create an <svg> element, I believe. I could be wrong though, as I haven't really used SVG much

https://developer.mozilla.org/en-US/docs/SVG/Element

err...beat me to it

wragen22

So styling directly in the svg code? I can't use external css?

Paulie_D

I think if you give each element a class or an ID, you can do it with CSS &/or JS.

Paulie_D

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

ChrisP

@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

Paulie_D

Hover...sure.

Codepen updated.

ChrisP

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

wragen22

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

   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 84.667" >
   <g enable-background="new    ">
<g>
  <g>
    <path  class="style" d="M2.103      78.416V8.562h42.512v12.674H16.273v13.971h19.859v12.573H16.273v17.963h28.341v12.674H2.103z"/>

wragen22

no ideas here?

chrisburton

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

wragen22

Yes, but using a class in my stylesheet

Paulie_D

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.

chrisburton

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.

wragen22

@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

Paulie_D

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.

wragen22

@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/

wragen22

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?

Paulie_D

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.

chrisburton

You would be far better off using an SVG than a png for scalability and quality.

treehouse : what would you like to learn today?

Forums

Style svg?