Question

我无法找出我的徽标太小的原因。这是SVG的问题，与我使用的其他svg徽标相比，它太小了。你可以看到下面的图片。

您是否看到菜单左上方的小蓝点？那就是徽标。 CSS没有问题，因为我已尝试过另一个徽标（特定的镀铬徽标），看起来不错。这里有svg代码。

＆＃13;

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

＆＃13;

我并不真正使用SVG，这个徽标是由一个代理商制作的。所以我会感激任何帮助！

Answer 1

这使徽标与视图框的大小相同：

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

我不确定Inkscape添加了多少实际上是必要的（就像我上面评论的那样，SVG不是我的强项），但如果你将它保存在.svg文件中然后加载它<img />标记，您可以设置实际需要的大小。否则，设置高度和宽度属性也会起作用。

这是一个高度和宽度设置为400px的jsFiddle：https://jsfiddle.net/sogdk632/

Answer 2

下载Inkscape
调整徽标大小
选择整个徽标（ctrl + a）
将选择导出为png（shift + ctrl + e）
点击导出

Answer 3

它显然设计在一个大页面的中间，并没有正确设置画板大小。

您需要做的就是调整viewBox值，使其与徽标更紧密地匹配。

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>

SVG徽标太小

3 个答案: