Skalowanie / zmiana rozmiaru SVG w HTML
Używam logo svg w html do wyświetlania. ale logo wydaje się być znacznie większe niż się wydaje. Chcę zmniejszyć skalę do 100px wysokości i szerokości proporcjonalnie. co powinienem zrobić?
Oto kod SVG:
<?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 .................
Oto kod HTML, którego używam:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/checkbox.css"/>
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.css" />
<title>Homepage</title>
<script src="scripts/jquery-1.8.2.min.js"></script>
<script src="scripts/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="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="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>
Dzięki, Ankit.