Skalieren / Ändern der Größe von SVG in einem HTML

Question

Dec 06, 2012, 08:57 AM

Skalieren / Ändern der Größe von SVG in einem HTML

Ich verwende ein Svg-Logo in HTML für die Anzeige. Aber das Logo scheint viel größer zu sein als es erscheint. Ich möchte es proportional auf 100px Höhe und Breite verkleinern. was soll ich machen?

Hier ist der SVG-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 .................

Hier ist der HTML-Code, den ich verwende:

<!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;">&copy; 2012 Accenture. All Rights Reserved.</label>
        </div>
    </div>  <!-- Content Footer -->
</body>
</html>

Danke, Ankit.