:tools: Scheduled maintenance

Heads up! Downtime for the Forums, related to the NodeBB upgrade, is planned for Thursday, December 14, starting from 10:00 UTC.
Please make sure to finish all your posts before this time. The downtime should only last for a few minutes.

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.

  • Wthout your HTML i cant imagine whats wrong.

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

    `<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="de">	
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8">
    		<title>SVG</title>
    	</head>
      
    	<body>
    		<p>test</p>
            <p><img 			
    		    src="http://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" 
    			width="512" height="512"></p>
    	</body>	
    </html>
    `
    
  • @angiesdom, are you zooming the image (from its context menu) or the page?

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

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

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

  • 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.

Log in to reply
 

Looks like your connection to Opera forums was lost, please wait while we try to reconnect.