No puedo descubrir por qué mi logotipo es demasiado pequeño. Este es un problema con el SVG, es demasiado pequeño en comparación con el logotipo de svg de otros que he usado. Puedes ver la imagen a continuación. logo

¿Ves el pequeño punto azul en la esquina superior izquierda del menú? Bueno, ese es el logo. No hay ningún problema con CSS porque he probado otro logotipo (el logotipo de Chrome para ser específico) y se ve bien. Aquí tienes el código svg.

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <!-- Creator: CorelDRAW X7 -->
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
    viewBox="0 0 29700 21000"
     xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
      <style type="text/css">
       <![CDATA[
        .fil0 {fill:#0496ff}
        .fil1 {fill:#F8F8FD}
        .fil2 {fill:#3245AA;fill-rule:nonzero}
       ]]>
      </style>
     </defs>
     <g id="Capa_x0020_1">
      <metadata id="CorelCorpID_0Corel-Layer"/>
      <circle class="fil0" cx="15466" cy="8645" r="2938"/>
      <path class="fil1" d="M15129 6849c-554,-184 -1785,23 -2016,623 -279,725 -52,2348 503,3094 25,21 39,32 69,53 322,173 424,199 822,227 2510,173 2220,-3465 622,-3997zm-1567 953c-52,609 117,1701 283,2287 78,219 -19,139 346,196 213,34 411,-8 601,-101 392,-195 420,-935 360,-1302 -145,-896 -479,-1383 -1386,-1149 -42,11 -165,40 -204,69z"/>
      <path class="fil0" d="M17743 6335c123,134 209,259 315,405 185,270 298,510 402,824 967,2926 -1638,4620 -3839,4213 -1228,-227 -2335,-1165 -2614,-2769 -48,-271 -45,-861 21,-1094l25 -117c7,-45 29,-95 22,-125 -46,79 -64,141 -87,245 -186,823 -129,1483 170,2237 11,28 22,56 34,84 246,571 650,1021 1121,1427 1418,1190 3695,866 4916,-412 2143,-2243 577,-5662 -2367,-6048 -338,-44 -708,-14 -1043,47l-146 29c-26,5 -8,-2 -30,9 -19,9 4,3 -26,17 139,4 298,-37 439,-43 49,-2 109,-11 155,-11 986,-1 1841,387 2532,1082z"/>
      <path class="fil1" d="M17275 7474c55,0 100,13 151,21 98,13 209,33 306,51 448,54 -44,-607 -314,-693 -205,-76 -410,-122 -624,-173 -119,-19 -247,-21 -335,28 -113,64 -89,146 -93,289 -17,874 246,1564 187,3217 -1,120 -38,236 -19,361 27,167 121,165 261,137 19,-4 21,-2 40,-8 14,-4 51,-22 65,-29 99,-50 147,-90 221,-167 55,-59 15,-18 61,-87 226,-333 158,-1041 238,-1198 15,-28 117,-49 144,-54 136,-27 308,-78 414,-162 128,-102 124,-307 112,-470 -29,-367 -268,-286 -467,-288 -289,-3 -214,108 -292,-446 -10,-74 -59,-270 -56,-329z"/>
      </g>
    </svg>

Realmente no trabajo con SVG, este logotipo fue hecho por una agencia. ¡Así que agradeceré cualquier ayuda!

2
Lucas David Ferrero 24 jun. 2017 a las 01:37

3 respuestas

La mejor respuesta

Esto hace que el logo tenga el mismo tamaño que el viewbox:

<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"
   xml:space="preserve"
   version="1.1"
   style="clip-rule:evenodd;fill-rule:evenodd;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision"
   viewBox="0 0 7342.1074 7220.7803"
   id="svg32"
   sodipodi:docname="logo.svg"
   width="7342.1074"
   height="7220.7803"
   inkscape:version="0.92.1 r15371"><metadata
   id="metadata36"><rdf:RDF><cc:Work
       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
   pagecolor="#ffffff"
   bordercolor="#666666"
   borderopacity="1"
   objecttolerance="10"
   gridtolerance="10"
   guidetolerance="10"
   inkscape:pageopacity="0"
   inkscape:pageshadow="2"
   inkscape:window-width="1107"
   inkscape:window-height="713"
   id="namedview34"
   showgrid="false"
   inkscape:zoom="0.040190476"
   inkscape:cx="2968.8339"
   inkscape:cy="1904.8506"
   inkscape:window-x="190"
   inkscape:window-y="33"
   inkscape:window-maximized="0"
   inkscape:current-layer="svg32" />
 <defs
   id="defs20">
  <style
   type="text/css"
   id="style18">
   <![CDATA[
    .fil0 {fill:#0496ff}
    .fil1 {fill:#F8F8FD}
    .fil2 {fill:#3245AA;fill-rule:nonzero}
   ]]>
  </style>
 </defs>
 <g
   id="Capa_x0020_1"
   transform="translate(-11881.166,-5184.0702)">
  <metadata
   id="CorelCorpID_0Corel-Layer" />
  <circle
   class="fil0"
   cx="15466"
   cy="8645"
   r="2938"
   id="circle23"
   style="fill:#0496ff" />
  <path
   class="fil1"
   d="m 15129,6849 c -554,-184 -1785,23 -2016,623 -279,725 -52,2348 503,3094 25,21 39,32 69,53 322,173 424,199 822,227 2510,173 2220,-3465 622,-3997 z m -1567,953 c -52,609 117,1701 283,2287 78,219 -19,139 346,196 213,34 411,-8 601,-101 392,-195 420,-935 360,-1302 -145,-896 -479,-1383 -1386,-1149 -42,11 -165,40 -204,69 z"
   id="path25"
   inkscape:connector-curvature="0"
   style="fill:#f8f8fd" />
  <path
   class="fil0"
   d="m 17743,6335 c 123,134 209,259 315,405 185,270 298,510 402,824 967,2926 -1638,4620 -3839,4213 -1228,-227 -2335,-1165 -2614,-2769 -48,-271 -45,-861 21,-1094 l 25,-117 c 7,-45 29,-95 22,-125 -46,79 -64,141 -87,245 -186,823 -129,1483 170,2237 11,28 22,56 34,84 246,571 650,1021 1121,1427 1418,1190 3695,866 4916,-412 2143,-2243 577,-5662 -2367,-6048 -338,-44 -708,-14 -1043,47 l -146,29 c -26,5 -8,-2 -30,9 -19,9 4,3 -26,17 139,4 298,-37 439,-43 49,-2 109,-11 155,-11 986,-1 1841,387 2532,1082 z"
   id="path27"
   inkscape:connector-curvature="0"
   style="fill:#0496ff" />
  <path
   class="fil1"
   d="m 17275,7474 c 55,0 100,13 151,21 98,13 209,33 306,51 448,54 -44,-607 -314,-693 -205,-76 -410,-122 -624,-173 -119,-19 -247,-21 -335,28 -113,64 -89,146 -93,289 -17,874 246,1564 187,3217 -1,120 -38,236 -19,361 27,167 121,165 261,137 19,-4 21,-2 40,-8 14,-4 51,-22 65,-29 99,-50 147,-90 221,-167 55,-59 15,-18 61,-87 226,-333 158,-1041 238,-1198 15,-28 117,-49 144,-54 136,-27 308,-78 414,-162 128,-102 124,-307 112,-470 -29,-367 -268,-286 -467,-288 -289,-3 -214,108 -292,-446 -10,-74 -59,-270 -56,-329 z"
   id="path29"
   inkscape:connector-curvature="0"
   style="fill:#f8f8fd" />
  </g>
</svg>

No estoy seguro de cuánto de lo que Inkscape agregó es realmente necesario (como comenté anteriormente, SVG no es mi fuerte), pero si guarda esto en un archivo .svg y luego lo carga con una etiqueta <img /> , puede establecer el tamaño que realmente necesite. De lo contrario, establecer los atributos de altura y anchura también funcionaría.

Aquí hay un jsFiddle con la altura y el ancho establecidos en 400px: https://jsfiddle.net/sogdk632/

2
Tieson T. 23 jun. 2017 a las 23:38
  • Descargar Inkscape
  • Cambiar el tamaño del logo
  • Seleccione todo el logotipo (ctrl + a)
  • exportar la selección como png (shift + ctrl + e)
  • haga clic en exportar
1
Krob Ow 23 jun. 2017 a las 23:14

Obviamente fue diseñado en el medio de una página grande y no tenía el tamaño de la mesa de trabajo configurado correctamente.

Todo lo que tenía que hacer era ajustar los valores de viewBox para que coincidan más con el logotipo.

viewBox="11802 5162 7470 7250"
<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <!-- Creator: CorelDRAW X7 -->
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
    viewBox="11802 5162 7470 7250"
     xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
      <style type="text/css">
       <![CDATA[
        .fil0 {fill:#0496ff}
        .fil1 {fill:#F8F8FD}
        .fil2 {fill:#3245AA;fill-rule:nonzero}
       ]]>
      </style>
     </defs>
     <g id="Capa_x0020_1">
      <metadata id="CorelCorpID_0Corel-Layer"/>
      <circle class="fil0" cx="15466" cy="8645" r="2938"/>
      <path class="fil1" d="M15129 6849c-554,-184 -1785,23 -2016,623 -279,725 -52,2348 503,3094 25,21 39,32 69,53 322,173 424,199 822,227 2510,173 2220,-3465 622,-3997zm-1567 953c-52,609 117,1701 283,2287 78,219 -19,139 346,196 213,34 411,-8 601,-101 392,-195 420,-935 360,-1302 -145,-896 -479,-1383 -1386,-1149 -42,11 -165,40 -204,69z"/>
      <path class="fil0" d="M17743 6335c123,134 209,259 315,405 185,270 298,510 402,824 967,2926 -1638,4620 -3839,4213 -1228,-227 -2335,-1165 -2614,-2769 -48,-271 -45,-861 21,-1094l25 -117c7,-45 29,-95 22,-125 -46,79 -64,141 -87,245 -186,823 -129,1483 170,2237 11,28 22,56 34,84 246,571 650,1021 1121,1427 1418,1190 3695,866 4916,-412 2143,-2243 577,-5662 -2367,-6048 -338,-44 -708,-14 -1043,47l-146 29c-26,5 -8,-2 -30,9 -19,9 4,3 -26,17 139,4 298,-37 439,-43 49,-2 109,-11 155,-11 986,-1 1841,387 2532,1082z"/>
      <path class="fil1" d="M17275 7474c55,0 100,13 151,21 98,13 209,33 306,51 448,54 -44,-607 -314,-693 -205,-76 -410,-122 -624,-173 -119,-19 -247,-21 -335,28 -113,64 -89,146 -93,289 -17,874 246,1564 187,3217 -1,120 -38,236 -19,361 27,167 121,165 261,137 19,-4 21,-2 40,-8 14,-4 51,-22 65,-29 99,-50 147,-90 221,-167 55,-59 15,-18 61,-87 226,-333 158,-1041 238,-1198 15,-28 117,-49 144,-54 136,-27 308,-78 414,-162 128,-102 124,-307 112,-470 -29,-367 -268,-286 -467,-288 -289,-3 -214,108 -292,-446 -10,-74 -59,-270 -56,-329z"/>
      </g>
    </svg>
0
Paul LeBeau 26 jun. 2017 a las 09:49