CODEWITHSUNDEEP
htmlobjectsvginline
Jay
Jay

Reputation: 782

SVG as an Object VS Inline SVG

When I use inline SVG, it works perfect

<!DOCTYPE HTML>
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>SVG Image</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
        <style type="text/css">
        svg{
          position: absolute;
          left: 0;
          background-color: green;
        }
        </style>
        </head>
           <body>
              <div class="container-fluid">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 800">
                  <circle cx="1000" cy="400" r="100" style="stroke:white;stroke-width:2px;fill:white" />
                </svg>
              </div>
           </body>
        </html>

But, if I use this large SVG data as an external file and embed it as an object in the main html file, it does not render. This is the main html file

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>SVG Image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<style type="text/css">
svg{
  position: absolute;
  left: 0;
  background-color: green;
}
</style>
</head>
   <body>
      <div class="container-fluid">

        <object data="circle.svg" type="image/svg+xml" width="600" height="600"></object>

      </div>
   </body>
</html>

and this is the circle.svg file

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 800">
<circle cx="1000" cy="400" r="100" style="stroke:white;stroke-width:2px;fill:white" />
</svg>

I am sure, I am missing something. Any help would be highly appreciated.

Upvotes: 1

Views: 899

Answers (1)

Robert Longson
Robert Longson

Reputation: 124109

There's no <svg> tag in the document any more so the style in your <style> tag doesn't point to anything. CSS does not apply cross-document and now you have 2 documents. The easiest thing would be to apply your styles to the <object> tag instead since that's in the main document.

I've converted the object data to a data URL so that it runs as a snippet but it's the same markup as in your question. 

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>SVG Image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<style type="text/css">
object{
  position: absolute;
  left: 0;
  background-color: green;
}
</style>
</head>
   <body>
      <div class="container-fluid">

        <object data="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIwMDAgODAwIj4NCjxjaXJjbGUgY3g9IjEwMDAiIGN5PSI0MDAiIHI9IjEwMCIgc3R5bGU9InN0cm9rZTp3aGl0ZTtzdHJva2Utd2lkdGg6MnB4O2ZpbGw6d2hpdGUiIC8+DQo8L3N2Zz4=" type="image/svg+xml" width="600" height="600"></object>

      </div>
   </body>
</html>

Upvotes: 2

Related Questions