<![CDATA[Problem with .svg's in Opera]]>Hi,
I'm building a website and testing in Opera 12. When I zoom in on the page and the .svg images are enlarged they get cut off at the height and width parameters set for them. In other words, the image is enlarged within the width and height set for it instead of the width and height parameters expanding with the image. I don't know very much about Opera so any help or suggestions will be appreciated.

]]>https://forums.opera.com/topic/6142/problem-with-svg-s-in-operaRSS for NodeSun, 10 May 2026 17:41:04 GMTThu, 30 Oct 2014 01:37:19 GMT60<![CDATA[Reply to Problem with .svg's in Opera on Thu, 30 Oct 2014 19:23:48 GMT]]>Sorry I took so long to get back. I had in my mind I would receive an email alert when someone posted.

Anyway, thanks for your input and I apologize for not giving a url or at least a screenshot so you could check out the page and/or the code. I didn't have a url to give as I'm working locally and have let my web hosting account expire for the time being. You can go here to see a screenshot example of the problem Imgur.

By the way, I found a workaround to the problem and I'll share it with you after I provide the original code so you can get the full picture. Here is how I originally linked to the image which worked in all browsers except Opera.

<div class="wp-logo">[![](img/wordpress-logo.svg)](http://www.wordpress.org" target="blank)</div>

Here is the css:

.wp-logo {
margin: 0 0 0 50px;
} 
.wp-logo { float: right;}  
.wp-logo {
position: absolute;
top: 55px;
right: -18px;
} 
.wp-logo a {
display: block;
text-align: center;
text-decoration: none;
text-align: center;
padding: 5px 10px;
border-radius: 5px;
    }

I found the workaround here.

Here is how the image is now targeted - it's pretty self explanatory so I won't comment on it. Here is the HTML:

<a href="http://www.wordpress.org" target="blank" class="svg">
<object type="image/svg+xml" width="80" height="80" data="img/wp-logo.svg" class="wp-logo"></object>
</a>

And here is the CSS:

a.svg {
float: right;
position: relative;
margin-top: 50px; 
display: inline-block; 
}

a.svg:after {
content: ""; 
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
}

To answer @angiesdom' question: I used both the keyboard shortcut (windows) control+ and also tried View>Zoom which is what I think you mean by the context menu.

I can't explain why no one else had this issue. It may have been something in my positioning technique but that was the first thing I looked and couldn't see anything there.

Anyway, thanks for your response and if there is anything else you have to add I'm all ears. Thanks again.

]]>https://forums.opera.com/post/56539https://forums.opera.com/post/56539Thu, 30 Oct 2014 19:23:48 GMT<![CDATA[Reply to Problem with .svg's in Opera on Thu, 30 Oct 2014 08:30:07 GMT]]>See if that's better - though honestly I don't get the correct context menu.

]]>https://forums.opera.com/post/56472https://forums.opera.com/post/56472Thu, 30 Oct 2014 08:30:07 GMT<![CDATA[Reply to Problem with .svg's in Opera on Thu, 30 Oct 2014 08:16:09 GMT]]>Zooming complete page with + or zooming SVG by context menu does not cut of any image parts.

]]>https://forums.opera.com/post/56471https://forums.opera.com/post/56471Thu, 30 Oct 2014 08:16:09 GMT<![CDATA[Reply to Problem with .svg's in Opera on Thu, 30 Oct 2014 08:08:58 GMT]]>Arggh. Something went wrong by copying URL to SVG for HTML testcase.

]]>https://forums.opera.com/post/56470https://forums.opera.com/post/56470Thu, 30 Oct 2014 08:08:58 GMT<![CDATA[Reply to Problem with .svg's in Opera on Thu, 30 Oct 2014 08:00:11 GMT]]>@angiesdom, are you zooming the image (from its context menu) or the page?

]]>https://forums.opera.com/post/56466https://forums.opera.com/post/56466Thu, 30 Oct 2014 08:00:11 GMT<![CDATA[Reply to Problem with .svg's in Opera on Thu, 30 Oct 2014 07:12:23 GMT]]>Wthout your HTML i cant imagine whats wrong.

But for my test Nothing is cut off in Opera 12 if you zoom. Try this:

`&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="de"&gt;	
	&lt;head&gt;
		&lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
		&lt;title&gt;SVG&lt;/title&gt;
	&lt;/head&gt;
  
	&lt;body&gt;
		&lt;p&gt;test&lt;/p&gt;
        &lt;p&gt;&lt;img 			
		    src="http://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" 
			width="512" height="512"&gt;&lt;/p&gt;
	&lt;/body&gt;	
&lt;/html&gt;
`
]]>https://forums.opera.com/post/56463https://forums.opera.com/post/56463Thu, 30 Oct 2014 07:12:23 GMT