Problem with .svg's in Opera

sonofadoc

sonofadoc

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.

sgunhouse

sgunhouse Moderator Volunteer

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;
`

sgunhouse

sgunhouse Moderator Volunteer

@angiesdom, are you zooming the image (from its context menu) or the page?

Deleted User

Deleted User

Arggh. Something went wrong by copying URL to SVG for HTML testcase.

Deleted User

Deleted User

Zooming complete page with + or zooming SVG by context menu does not cut of any image parts.

sgunhouse

sgunhouse Moderator Volunteer

See if that's better - though honestly I don't get the correct context menu.

sonofadoc

sonofadoc

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.