I am using an svg logo in html for displaying it. but the logo seems to appear much more larger than it appears. I want to scale it down to 100px height and width in proportion. what should I do?Here is the SVG Code:\[code\]<?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Created with Inkscape (http://www.inkscape.org/) --><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" preserveAspectRatio="xMinYMin meet" viewPort="0 0 100 29" width="400" height="114.38815" id="svg2" version="1.1" inkscape:version="0.48.2 r9819" sodipodi:docname="Accenture.svg"> <title id="title4080">Logo of Accenture</title> <defs id="defs4"> <clipPath id="clipPath3441" clipPathUnits="userSpaceOnUse"> <path .................\[/code\]Here is the HTML code that I am using:\[code\]<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://stackoverflow.com/questions/13739226/css/checkbox.css"/> <link rel="stylesheet" href="http://stackoverflow.com/questions/13739226/css/jquery.mobile-1.1.1.css" /> <title>Homepage</title> <script src="http://stackoverflow.com/questions/13739226/scripts/jquery-1.8.2.min.js"></script> <script src="http://stackoverflow.com/questions/13739226/scripts/jquery.mobile-1.2.0.min.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/13739226/scripts/xml.js"></script> <script type="text/javascript"> $(document).ready(function() { /*alert("Home Page Ready");*/ }); // document </script> <style> .headerTableClass{ width: 100%; } .headerRowClass{ background-color: white; width: 100%; } .tableCell{ padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } </style></head><body> <!-- ******** Header **********--> <div data-role="header" style="padding-top: 0px"> <div> <table id="headerTable" class="headerTableClass"> <tr id="headerRow" class="headerRowClass"> <td class="tableCell"><embed src="http://stackoverflow.com/questions/13739226/mobileSVG/acclogo1.svg" style="height: 130px; width:500px;" type="image/svg+xml"></td> </tr> </table> </div> </div><!-- /header --> <!-- ******** Content **********--> <div data-role="content" class="contentGrayBg"> </div> <!-- Content End --> <!-- ******** Footer **********--> <div data-role="footer"> <div class="footerPadding"> <label style="color: red; font-style: normal; font-size: 12px">Go to Accenture.com</label> <br/> <label style="font-size: 12px;">© 2012 Accenture. All Rights Reserved.</label> </div> </div> <!-- Content Footer --></body></html>\[/code\]Thanks,Ankit.
Scaling/Resizing SVG in an HTML
- Thread starter Handware
- Start date