Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to style external svg file with css?

Tags:

html

css

svg

Is it possible to style external svg file with css without modifying the svg file content?

<img src="image/svg/3ds-max.svg">

And is there any better way to display external svg file in html5?

like image 949
eneepo Avatar asked Jan 31 '12 15:01

eneepo


2 Answers

It's not possible using an img tag, these are basically similar to bitmaps as far as accessing or modify them is concerned. You could use the <iframe> tag with its style attribute instead or alternatively just include the svg inline in the file which you can do with html5.

like image 152
Robert Longson Avatar answered Oct 28 '22 15:10

Robert Longson


Almost. If you can embed your SVG directly in your HTML5 document using the svg tag, then you can style it with CSS, like so:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #redcircle { stroke:black; stroke-width:5; }
        </style>
    </head>
    <body>
        <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            <circle id="redcircle" cx="50" cy="50" r="30" fill="red" /> 
        </svg>
    </body>
</html>
like image 29
james.garriss Avatar answered Oct 28 '22 14:10

james.garriss