Escala / cambio de tamaño de SVG en un HTML

Question

Dec 06, 2012, 08:57 AM

Escala / cambio de tamaño de SVG en un HTML

Estoy usando un logotipo svg en html para mostrarlo. pero el logotipo parece ser mucho más grande de lo que parece. Quiero reducirla a 100px de altura y ancho en proporción. ¿Qué tengo que hacer?

Aquí está el código 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 .................

Aquí está el código HTML que estoy usando:

<!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>

Gracias, Ankit.