SVG徽标太小
我无法找出我的徽标太小的原因。这是SVG的问题，与我使用的其他svg徽标相比，它太小了。你可以看到下面的图片。
您是否看到菜单左上方的小蓝点？那就是徽标。 CSS没有问题，因为我已尝试过另一个徽标（特定的镀铬徽标），看起来不错。 这里有svg代码。
＆＃13;
＆＃13;
＆＃13;
＆＃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>
我并不真正使用SVG，这个徽标是由一个代理商制作的。所以我会感激任何帮助！
3 个答案:
答案 0 :(得分：2)
这使徽标与视图框的大小相同：
<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/
答案 1 :(得分：1)
- 下载Inkscape
- 调整徽标大小
- 选择整个徽标（ctrl + a）
- 将选择导出为png（shift + ctrl + e）
- 点击导出
答案 2 :(得分：0)
它显然设计在一个大页面的中间，并没有正确设置画板大小。
您需要做的就是调整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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？