Question: In my website i use svg elements. Sometimes i need them to be clickable, therefore i want pointer cursor over them.

However adding css class or style

```
cursor: pointer;

```

not work.

That's the example element

```
<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" style="left: 87px; bottom: 56px;" es-character="male2"></object>

```

It seems like it just not worki with svg. Anyone know how to fix, or how to go around it?

Answer: 
To style individual elements in your SVG you can either use Javascript or use CSS inside the image in the defs tag or reference an external stylesheet.

```
<svg ...>
  <defs>
    <style type="text/css"><![CDATA[
      .myfigureclass {
        cursor: pointer;
      }
    ]]></style>
  </defs>

```

Check [this link](https://www.sitepoint.com/svg-styling-with-css/) for more information.

You can also use an external stylesheet for your SVG like this:

```
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.svg.css" ?>

<svg
   xmlns="http://www.w3.org/2000/svg"
   ...>
(...)
</svg>

```

Check [this link](http://tutorials.jenkov.com/svg/svg-and-css.html#external-css-style-sheets) for more information.
One of the simplest solutions may be to use img tag instead of object tag

```
<img src="course/ani/male2.svg" style="left: 87px; bottom: 56px;"  />

```

although, ideally you can embed the svg in the html. 
That doesn't let you cache the svg files, so I found using javascript to load the svg file as text and insert into the DOM allowed for caching and still got the SVG directly into the DOM so it could use all the css styles from your page.