RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1480365
Accepted
Дмитрий Варзанов
Дмитрий Варзанов
Asked:2022-12-23 09:30:44 +0000 UTC2022-12-23 09:30:44 +0000 UTC 2022-12-23 09:30:44 +0000 UTC

如何选择合适的viewBox、尺寸

  • 772

目标是使原始 svg 尽可能轻。

假设我们拿一个现成的 svg 图标,向上或向下改变它的大小。

问题是画布的大小,图标的大小,是否影响权重。也就是坐标数?

之前和之后,什么都没有动过。只是更改了 viewBox 和对象的大小以适合画布......

以及如何减轻重量?我使用 Inkscape 编辑器

svg
  • 2 2 个回答
  • 49 Views

2 个回答

  • Voted
  1. Best Answer
    Alexandr_TT
    2022-12-24T01:50:47Z2022-12-24T01:50:47Z

    问题是画布的大小,图标的大小,是否影响权重。也就是坐标数?

    SVG 画布的大小,无论是否width="32" height="32"对width="32000"``height="32000"文件重量有很大影响,都会有几个字节的差异,具体取决于有效数字的数量。尽管人物和画布的物理尺寸有很大差异。

    文件权重受 SVG 命令坐标中有效数字位数的影响很大: path, line, polyline, polygon, rect, circle, 在 Inkscape 中绘制后出现

    以一个图标文件为例

    <svg width="192" height="192" fill="none" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg"><g transform="rotate(0 3.14 2.18) translate(16.51195810383291 18.020270094272504) scale(1.2066495923516827)"><g clip-path="url(#a)" clip-rule="evenodd" fill-rule="evenodd"><path d="m120.2 107.3c3e-3 3.439-1.315 6.748-3.681 9.243-2.367 2.495-5.601 3.987-9.035 4.167s-6.807-0.965-9.421-3.2c-2.614-2.234-4.271-5.387-4.628-8.807l-0.07-0.083v-1.201c0-0.04-0.0025-0.079-0.0025-0.119 0-0.039 0.0025-0.078 0.0025-0.118v-18.68c0-0.0395-0.0025-0.0788-0.0025-0.1183s0.0025-0.079 0.0025-0.1185v-31.84c0-14.28-24.98-10.22-27.4-21.27-2.418 11.05-27.4 6.985-27.4 21.27v31.84c0 0.0388 0.0025 0.077 0.0025 0.116s-0.0025 0.077-0.0025 0.1158v18.3c0 0.039 0.0025 0.077 0.0025 0.116s-0.0025 0.077-0.0025 0.116v1.965l-0.2 0.222c-0.3601 2.064-1.199 4.015-2.449 5.697-1.25 1.682-2.876 3.047-4.749 3.987-1.873 0.941-3.939 1.429-6.035 1.427-2.095-3e-3 -4.161-0.496-6.032-1.44-1.87-0.944-3.494-2.313-4.74-3.998-1.246-1.684-2.08-3.637-2.436-5.702-0.3556-2.065-0.2227-4.185 0.3881-6.189 0.6109-2.004 1.683-3.838 3.13-5.353-1.624-1.702-2.772-3.801-3.33-6.086-0.5576-2.286-0.5051-4.677 0.1524-6.936 0.6574-2.259 1.897-4.305 3.594-5.934 1.697-1.629 3.792-2.784 6.076-3.349v-28.76c0-23.4 18.38-37.41 43.46-37.81v-0.00975c0.19 0 0.3775 0.00325 0.5675 0.00475s0.3775-0.00475 0.5675-0.00475v0.00975c25.08 0.409 43.46 14.42 43.46 37.81v28.76c2.305 0.5704 4.419 1.742 6.124 3.396s2.941 3.73 3.583 6.017c0.641 2.287 0.664 4.704 0.067 7.003-0.597 2.299-1.794 4.399-3.467 6.085 2.5 2.512 3.901 5.912 3.897 9.456z" fill="#E7EEF1"></path><g fill="#000"><path d="m120.2 107.3c3e-3 3.439-1.315 6.748-3.681 9.243-2.367 2.495-5.601 3.987-9.035 4.167s-6.807-0.965-9.421-3.2c-2.614-2.234-4.271-5.387-4.628-8.807l-0.07-0.083v-1.201c0-0.04-0.0025-0.079-0.0025-0.119 0-0.019 6e-4 -0.039 0.0013-0.059 6e-4 -0.019 0.0012-0.039 0.0012-0.059v-18.68c0-0.0198-6e-4 -0.0395-0.0012-0.0592-7e-4 -0.0197-0.0013-0.0394-0.0013-0.0591s6e-4 -0.0395 0.0013-0.0592c6e-4 -0.0198 0.0012-0.0396 0.0012-0.0593v-31.84c0-7.729-7.315-10.09-14.41-12.37-5.484-1.767-10.84-3.491-12.58-7.62-0.1699-0.4017-0.3056-0.8262-0.4039-1.276-0.0984 0.4494-0.2341 0.8739-0.4039 1.276-1.746 4.129-7.099 5.854-12.58 7.62-7.096 2.286-14.41 4.643-14.41 12.37v31.84c0 0.0388 0.0025 0.077 0.0025 0.116 0 0.0195-7e-4 0.0388-0.0013 0.0581-6e-4 0.0192-0.0012 0.0383-0.0012 0.0577v18.3c0 0.039 0.0025 0.077 0.0025 0.116 0 0.019-7e-4 0.039-0.0013 0.058s-0.0012 0.038-0.0012 0.058v1.965l-0.2 0.222c-0.3601 2.064-1.199 4.015-2.449 5.697-1.25 1.682-2.876 3.047-4.749 3.987-1.873 0.941-3.939 1.429-6.035 1.427-2.095-3e-3 -4.161-0.496-6.032-1.44-1.87-0.944-3.494-2.313-4.74-3.998-1.246-1.684-2.08-3.637-2.436-5.702-0.3556-2.065-0.2227-4.185 0.3881-6.189 0.6109-2.004 1.683-3.838 3.13-5.353-1.624-1.702-2.772-3.801-3.33-6.086-0.5576-2.286-0.5051-4.677 0.1524-6.936 0.6574-2.259 1.897-4.305 3.594-5.934 1.697-1.629 3.792-2.784 6.076-3.349v-28.76c0-23.4 18.38-37.41 43.46-37.81v-0.00975c0.1232 0 0.2453 0.00136 0.3678 0.00273 0.0057 7e-5 0.0114 1.3e-4 0.0172 2e-4 0.0607 6.7e-4 0.1214 0.00134 0.1825 0.00182 0.061 4.8e-4 0.1218 1.6e-4 0.1825-4.9e-4 0.0438-4.7e-4 0.0876-0.00112 0.1314-0.00177 0.0843-0.00124 0.1687-0.00249 0.2536-0.00249v0.00975c25.08 0.409 43.46 14.42 43.46 37.81v28.76c2.305 0.5704 4.419 1.742 6.124 3.396s2.941 3.73 3.583 6.017c0.641 2.287 0.664 4.704 0.067 7.003-0.597 2.299-1.794 4.399-3.467 6.085 2.5 2.512 3.901 5.912 3.897 9.456zm-2.866-9.457c2.326 2.591 3.62 5.958 3.616 9.457 3e-3 3.631-1.389 7.124-3.887 9.759-2.499 2.635-5.913 4.21-9.54 4.4-3.626 0.19-7.187-1.019-9.947-3.379-2.707-2.313-4.441-5.559-4.863-9.09-0.0635-0.112-0.0975-0.239-0.0975-0.37v-1.201c0-6e-3 -2e-4 -0.014-9e-4 -0.035-5e-4 -0.018-0.0016-0.05-0.0016-0.084 0-0.023 5e-4 -0.046 1e-3 -0.064 3e-4 -7e-3 5e-4 -0.013 6e-4 -0.019 7e-4 -0.021 9e-4 -0.029 9e-4 -0.035v-18.68c0-0.0059-2e-4 -0.0137-9e-4 -0.0353-5e-4 -0.0178-0.0016-0.0494-0.0016-0.083 0-0.0316 1e-3 -0.0614 0.0015-0.0796l1e-4 -0.0034c7e-4 -0.0217 9e-4 -0.0296 9e-4 -0.0355v-31.84c0-3.301-1.421-5.516-3.643-7.197-2.268-1.715-5.352-2.86-8.633-3.937-0.5281-0.1734-1.062-0.3452-1.597-0.5175-2.738-0.8816-5.518-1.777-7.82-2.975-2.111-1.099-3.917-2.5-4.954-4.467-1.037 1.966-2.843 3.368-4.954 4.467-2.302 1.198-5.082 2.094-7.82 2.975-0.5351 0.1723-1.069 0.3441-1.597 0.5175-3.281 1.078-6.365 2.222-8.633 3.937-2.222 1.681-3.643 3.896-3.643 7.197v31.84c0 0.0052 1e-4 0.0123 8e-4 0.0336 6e-4 0.0174 0.0017 0.0488 0.0017 0.0824 0 0.0337-0.0011 0.065-0.0017 0.0824-7e-4 0.0212-8e-4 0.0282-8e-4 0.0334v18.3c0 3e-3 0 7e-3 3e-4 0.016l5e-4 0.018 1e-4 2e-3c6e-4 0.018 0.0016 0.048 0.0016 0.08 0 0.034-0.0011 0.065-0.0017 0.082-7e-4 0.022-8e-4 0.029-8e-4 0.034v1.965c0 0.186-0.069 0.365-0.1936 0.503l-0.0569 0.063c-0.3999 2.1-1.27 4.083-2.546 5.8-1.32 1.776-3.037 3.218-5.014 4.211-1.977 0.992-4.16 1.508-6.372 1.506-2.212-3e-3 -4.394-0.523-6.369-1.52-1.975-0.997-3.689-2.443-5.005-4.222-1.316-1.778-2.197-3.84-2.572-6.021-0.3755-2.18-0.2352-4.418 0.4098-6.535 0.5769-1.893 1.543-3.641 2.834-5.134-1.467-1.698-2.512-3.722-3.046-5.908-0.5888-2.413-0.5333-4.939 0.1609-7.324 0.6941-2.385 2.003-4.546 3.795-6.266 1.65-1.584 3.656-2.743 5.846-3.382v-28.18c0-11.91 4.688-21.48 12.59-28.1 7.865-6.591 18.86-10.23 31.48-10.46 0.0435-0.00784 0.0883-0.01194 0.1341-0.01194 0.1269 0 0.2572 0.00145 0.3826 0.00285 0.0653 7.2e-4 0.1293 0.00144 0.1908 0.00192 0.1123 8.9e-4 0.1928-4.9e-4 0.2805-0.00199 0.0786-0.00134 0.163-0.00278 0.2811-0.00278 0.0457 0 0.0905 0.0041 0.134 0.01194 12.62 0.2279 23.62 3.868 31.48 10.46 7.906 6.625 12.59 16.19 12.59 28.1v28.18c2.212 0.6462 4.237 1.823 5.896 3.432 1.801 1.746 3.106 3.938 3.783 6.353s0.701 4.966 0.071 7.394c-0.57 2.192-1.655 4.213-3.162 5.895z"></path><path d="m67.31 22.21v1e-4l-1e-4 2e-4 -1e-4 1e-4 -0.0015 0.0021-0.0077 0.0115c-0.0072 0.0108-0.0184 0.0277-0.0331 0.0507-0.0296 0.046-0.0735 0.1162-0.1286 0.2096-0.1102 0.1869-0.2652 0.4664-0.4399 0.8309-0.3494 0.7292-0.7765 1.796-1.082 3.14-0.6098 2.683-0.7355 6.474 1.227 10.89 0.0841 0.1893-0.0011 0.4109-0.1904 0.495s-0.4109-0.0011-0.495-0.1904c-2.038-4.584-1.913-8.544-1.273-11.36 0.3197-1.407 0.7675-2.527 1.137-3.298 0.1847-0.3855 0.35-0.6841 0.4702-0.8879 0.0602-0.1019 0.109-0.1801 0.1435-0.2337 0.0172-0.0268 0.0308-0.0475 0.0404-0.0619l0.0113-0.0168 0.0033-0.0049 0.0011-0.0015 4e-4 -6e-4c1e-4 -2e-4 2e-4 -3e-4 0.3021 0.2086l-0.3019-0.209c0.1179-0.1702 0.3515-0.2127 0.5218-0.0948 0.1702 0.1178 0.2127 0.3512 0.0951 0.5214z"></path><path d="m52.34 38.34c0.0896 0.1867 0.0109 0.4107-0.1758 0.5004-6.169 2.961-8.742 6.401-10.4 9.346-0.3548 0.6309-0.6675 1.239-0.9673 1.822-0.053 0.1031-0.1057 0.2055-0.1581 0.3071-0.3466 0.6716-0.6833 1.31-1.048 1.888-0.7343 1.162-1.601 2.108-2.951 2.648-1.29 0.5159-2.382 0.6887-3.317 0.5952-0.9397-0.0939-1.697-0.455-2.312-0.9678-1.209-1.008-1.864-2.601-2.358-3.836-0.0769-0.1923 0.0166-0.4106 0.2089-0.4875s0.4105 0.0166 0.4875 0.2089c0.5058 1.265 1.101 2.672 2.142 3.539 0.5096 0.4247 1.128 0.7199 1.907 0.7978 0.784 0.0784 1.754-0.0613 2.964-0.5454 1.15-0.4598 1.908-1.264 2.596-2.352 0.3458-0.5472 0.6692-1.159 1.016-1.831 0.0516-0.1001 0.1037-0.2014 0.1565-0.304 0.2996-0.5826 0.6194-1.204 0.9817-1.849 1.718-3.055 4.396-6.615 10.73-9.654 0.1867-0.0896 0.4107-0.0109 0.5004 0.1758z"></path><path d="m79.04 38.21c-0.0906 0.183-0.011 0.4026 0.1777 0.4905 6.234 2.903 8.833 6.274 10.51 9.161 0.3585 0.6184 0.6745 1.214 0.9774 1.786 0.0536 0.1011 0.1069 0.2014 0.1598 0.301 0.3502 0.6584 0.6905 1.284 1.06 1.85 0.7421 1.139 1.618 2.066 2.982 2.596 1.303 0.5057 2.408 0.6751 3.352 0.5835 0.9497-0.0921 1.715-0.4461 2.337-0.9488 1.222-0.9879 1.883-2.55 2.383-3.76 0.078-0.1885-0.017-0.4024-0.211-0.4778-0.195-0.0754-0.415 0.0163-0.493 0.2048-0.511 1.24-1.113 2.619-2.164 3.469-0.5153 0.4162-1.14 0.7056-1.927 0.7819-0.7923 0.0769-1.772-0.06-2.995-0.5345-1.162-0.4508-1.928-1.239-2.623-2.306-0.3494-0.5363-0.6762-1.136-1.027-1.795-0.0521-0.0981-0.1048-0.1974-0.1581-0.298-0.3028-0.5711-0.626-1.181-0.9921-1.812-1.736-2.995-4.442-6.485-10.84-9.463-0.1887-0.0879-0.415-0.0107-0.5056 0.1723z"></path></g><path d="m25.19 99.92c1.46-0.0021 2.887 0.429 4.102 1.238 1.215 0.81 2.162 1.961 2.722 3.309 0.56 1.348 0.7076 2.832 0.424 4.264-0.2835 1.432-0.9854 2.748-2.017 3.78-1.031 1.033-2.346 1.737-3.778 2.022-1.432 0.286-2.916 0.14-4.264-0.418s-2.502-1.504-3.313-2.717c-0.8112-1.214-1.244-2.641-1.244-4.1-8e-4 -0.968 0.1892-1.927 0.5591-2.822 0.3698-0.895 0.9123-1.708 1.596-2.393 0.6842-0.685 1.497-1.229 2.391-1.6 0.8942-0.371 1.853-0.5624 2.821-0.563zm82.01 0c1.459-0.0016 2.886 0.43 4.101 1.24 1.214 0.809 2.161 1.961 2.721 3.309 0.559 1.348 0.707 2.832 0.423 4.264-0.284 1.431-0.986 2.747-2.018 3.779-1.031 1.033-2.346 1.736-3.777 2.022-1.432 0.285-2.916 0.139-4.264-0.419-1.349-0.558-2.502-1.504-3.313-2.717-0.811-1.214-1.244-2.641-1.243-4.1-8e-4 -1.956 0.7754-3.832 2.157-5.215 1.382-1.384 3.257-2.162 5.213-2.163zm-82.01-19.29c1.459-0.0014 2.886 0.4298 4.099 1.239s2.16 1.961 2.72 3.308c0.5594 1.347 0.7065 2.83 0.4228 4.262-0.2838 1.431-0.9855 2.746-2.017 3.778-1.031 1.032-2.345 1.735-3.776 2.02s-2.914 0.1396-4.262-0.4184c-1.348-0.558-2.5-1.503-3.311-2.716-0.8107-1.213-1.243-2.639-1.243-4.098-8e-4 -0.9681 0.1891-1.927 0.559-2.822s0.9124-1.708 1.597-2.393c0.6842-0.685 1.497-1.228 2.391-1.599 0.8942-0.3709 1.853-0.5619 2.821-0.5623v1e-3zm82.01 0c1.458-9e-4 2.885 0.4307 4.098 1.24 1.214 0.8098 2.16 1.961 2.719 3.309s0.705 2.83 0.421 4.262c-0.284 1.431-0.986 2.746-2.017 3.777s-2.345 1.735-3.776 2.02c-1.431 0.2849-2.914 0.1392-4.262-0.4189-1.348-0.558-2.5-1.503-3.31-2.716-0.811-1.213-1.243-2.639-1.243-4.098-5e-4 -0.9682 0.1894-1.927 0.5594-2.822 0.371-0.8947 0.913-1.708 1.598-2.393 0.684-0.6849 1.497-1.228 2.391-1.599 0.895-0.3709 1.853-0.5619 2.822-0.5623v1e-3z" fill="#CED6D9"></path><path d="m25.21 80.26c-0.0092-7e-4 -0.0185-0.0011-0.0278-0.0011-1.017 4e-4 -2.025 0.2012-2.964 0.5909-0.9398 0.3898-1.794 0.9609-2.512 1.681-0.719 0.7198-1.289 1.574-1.678 2.514-0.3886 0.9402-0.5882 1.948-0.5874 2.965v-2e-4h0.375l-0.375 3e-4v-1e-4c0 1.533 0.4547 3.032 1.307 4.306 0.8519 1.275 2.063 2.268 3.479 2.854 1.417 0.5863 2.975 0.7393 4.479 0.4397 1.504-0.2997 2.884-1.039 3.968-2.123 1.084-1.085 1.821-2.466 2.119-3.97 0.2981-1.504 0.1436-3.062-0.4442-4.478s-1.582-2.626-2.858-3.476c-1.268-0.8454-2.756-1.298-4.28-1.302zm-0.0542 0.749c-0.9098 0.0038-1.81 0.185-2.651 0.5336-0.8487 0.3521-1.62 0.8679-2.269 1.518s-1.164 1.422-1.515 2.271c-0.351 0.8491-0.5313 1.759-0.5305 2.678v3e-4c0 1.385 0.4107 2.738 1.18 3.89 0.7694 1.151 1.863 2.048 3.143 2.578s2.687 0.6678 4.045 0.3971 2.605-0.9381 3.584-1.918c0.9786-0.9797 1.645-2.228 1.914-3.586s0.1297-2.766-0.4012-4.045c-0.5309-1.279-1.429-2.372-2.581-3.14-1.152-0.7683-2.506-1.178-3.891-1.176-9e-3 1e-4 -0.0179-3e-4 -0.0269-9e-4zm82.06-0.749c-9e-3 -7e-4 -0.018-0.0011-0.028-0.0011-1.017 4e-4 -2.025 0.2012-2.964 0.5909-0.94 0.3897-1.794 0.9608-2.513 1.681-0.72 0.7197-1.29 1.574-1.679 2.514-0.389 0.9401-0.5889 1.948-0.5884 2.965m7.772-7.75c1.524 0.0045 3.012 0.4577 4.279 1.304 1.276 0.8509 2.27 2.061 2.857 3.477 0.588 1.416 0.742 2.974 0.443 4.478-0.298 1.504-1.036 2.885-2.12 3.97-1.083 1.084-2.464 1.823-3.968 2.122-1.503 0.2995-3.062 0.1463-4.478-0.4401s-2.627-1.58-3.479-2.854c-0.8518-1.275-1.306-2.773-1.306-4.306m7.718-7.001c-0.91 0.0038-1.81 0.185-2.651 0.5336-0.849 0.352-1.62 0.8678-2.27 1.518s-1.165 1.422-1.516 2.271-0.532 1.759-0.531 2.678v1e-4c0 1.385 0.41 2.738 1.18 3.89 0.769 1.151 1.862 2.048 3.142 2.578 1.279 0.5296 2.687 0.668 4.045 0.3975s2.605-0.9377 3.584-1.917 1.645-2.227 1.915-3.585c0.269-1.358 0.13-2.766-0.401-4.045-0.53-1.279-1.428-2.372-2.58-3.141s-2.506-1.178-3.89-1.177c-9e-3 1e-4 -0.018-3e-4 -0.027-9e-4zm-78.09 20.46c-1.153-0.768-2.508-1.177-3.893-1.175l-5e-4 -0.375 2e-4 0.375c-0.919 1e-3 -1.829 0.182-2.678 0.534-0.8488 0.353-1.62 0.869-2.269 1.519-0.6494 0.65-1.164 1.422-1.515 2.271-0.351 0.849-0.5313 1.759-0.5306 2.678v1e-3c-1e-4 1.385 0.4108 2.74 1.181 3.892 0.7699 1.151 1.864 2.049 3.144 2.579s2.689 0.668 4.048 0.397c1.359-0.271 2.606-0.939 3.586-1.92 0.979-0.98 1.645-2.229 1.914-3.588s0.129-2.767-0.4025-4.047c-0.5316-1.279-1.431-2.372-2.584-3.141zm-3.894-1.925c-1.017 7e-4 -2.025 0.2017-2.964 0.592-0.9397 0.39-1.793 0.961-2.512 1.681s-1.289 1.574-1.678 2.515c-0.3887 0.94-0.5883 1.947-0.5875 2.965h0.375-0.375c-1e-4 1.534 0.4549 3.033 1.307 4.308 0.8524 1.276 2.064 2.269 3.481 2.856 1.417 0.586 2.977 0.739 4.481 0.439 1.504-0.3 2.886-1.039 3.97-2.125 1.084-1.085 1.821-2.467 2.119-3.972s0.1429-3.064-0.4456-4.481c-0.5885-1.416-1.584-2.626-2.86-3.477-1.276-0.85-2.776-1.303-4.31-1.301m85.9 1.927c-1.153-0.769-2.508-1.179-3.893-1.177-1.856 1e-3 -3.636 0.74-4.948 2.053s-2.048 3.093-2.047 4.95c0 1.385 0.41 2.739 1.18 3.891s1.864 2.05 3.144 2.58c1.28 0.529 2.689 0.668 4.047 0.397 1.359-0.271 2.607-0.939 3.586-1.919s1.646-2.228 1.915-3.587 0.13-2.768-0.402-4.047c-0.531-1.28-1.43-2.373-2.582-3.141zm-3.894-1.927c1.534-0.0017 3.034 0.452 4.31 1.303 1.276 0.85 2.271 2.061 2.859 3.477 0.588 1.417 0.743 2.976 0.445 4.48-0.299 1.505-1.036 2.887-2.12 3.972s-2.466 1.825-3.97 2.124c-1.504 0.3-3.063 0.147-4.481-0.439-1.417-0.587-2.628-1.581-3.48-2.856-0.8526-1.275-1.308-2.774-1.307-4.308m7.744-7.753c-2.055 0.0014-4.025 0.819-5.477 2.273-1.453 1.454-2.268 3.425-2.267 5.48" fill="#000"></path></g><defs><clipPath id="a"><rect width="128" height="128" fill="#fff"></rect></clipPath></defs></g></svg>

    path小数点后每个坐标都有3-4位有效数字,导致图标文件的权重为13.36k,当然很好。一个简单的图标很多

    显着降低减少计数的文件优化器的重量。小数部分的有效数字。例如 - 1。

    我认为最好的优化器SVGOMG

    在此处输入图像描述

    优化后的文件权重变为:2.89k,即减少了3倍。

    <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="none"><g transform="matrix(1.2 0 0 1.2 16.5 18)"><g fill-rule="evenodd" clip-path="url(#a)" clip-rule="evenodd"><path fill="#E7EEF1" d="M120.2 107.3a13.4 13.4 0 0 1-26.8 1.4V56.3c0-14.3-25-10.2-27.4-21.2-2.5 11-27.4 7-27.4 21.2V109l-.2.2a13.4 13.4 0 1 1-23-11.6A13.4 13.4 0 0 1 22 75.3V46.6C22 23.2 40.3 9.2 65.4 8.8h1.1c25.1.4 43.5 14.4 43.5 37.8v28.7a13.4 13.4 0 0 1 6.3 22.5c2.5 2.6 3.9 6 3.9 9.5z"/><g fill="#000"><path d="M120.2 107.3a13.4 13.4 0 0 1-26.8 1.4V107.2a1.7 1.7 0 0 1 0-.1V88.5a1.7 1.7 0 0 1 0-.2V56.4c0-7.7-7.3-10-14.4-12.3-5.5-1.8-10.9-3.5-12.6-7.7l-.4-1.2-.4 1.2c-1.8 4.2-7.1 5.9-12.6 7.7-7.1 2.2-14.4 4.6-14.4 12.3V109l-.2.2a13.4 13.4 0 1 1-23-11.6A13.4 13.4 0 0 1 22 75.3V46.6C22 23.2 40.3 9.2 65.4 8.8h.4a57.2 57.2 0 0 0 .5 0h.2c25.1.4 43.5 14.4 43.5 37.8v28.7a13.4 13.4 0 0 1 6.3 22.5c2.5 2.6 4 6 4 9.5zm-2.9-9.5a14.1 14.1 0 0 1-9.8 23.7 14.2 14.2 0 0 1-14.9-12.9v-1.3a2.4 2.4 0 0 1 0-.1V56.4c0-3.3-1.4-5.5-3.6-7.2a30 30 0 0 0-8.7-4c-.5 0-1-.3-1.6-.4-2.7-1-5.5-1.8-7.8-3-2-1.1-3.9-2.5-5-4.5-1 2-2.8 3.4-4.9 4.5-2.3 1.2-5 2-7.8 3l-1.6.5c-3.3 1-6.4 2.2-8.6 4a8.5 8.5 0 0 0-3.7 7.1V109c0 .2 0 .4-.2.5a14.2 14.2 0 1 1-24.7-11.9 14.2 14.2 0 0 1 6.8-22.8V46.6c0-12 4.7-21.5 12.6-28.1A50 50 0 0 1 65.8 8H66.7A50 50 0 0 1 98 18.5c8 6.6 12.6 16.2 12.6 28v28.3a14.2 14.2 0 0 1 6.6 23z"/><path d="M67.3 22.2a3 3 0 0 0-.2.3l-.4.8a17 17 0 0 0 .1 14 .4.4 0 1 1-.6.3A17.8 17.8 0 0 1 66 23a11.8 11.8 0 0 1 .7-1.2l.3.2-.3-.2a.4.4 0 0 1 .6.4zM52.3 38.3c.1.2 0 .5-.1.5-6.2 3-8.8 6.4-10.4 9.4l-1 1.8a259.7 259.7 0 0 1-1.2 2.2 6.2 6.2 0 0 1-3 2.7 7 7 0 0 1-3.3.5c-1 0-1.7-.4-2.3-1a9.4 9.4 0 0 1-2.3-3.8.4.4 0 0 1 .6-.2 8.7 8.7 0 0 0 2.2 3.5c.5.4 1.1.7 1.9.8.8 0 1.8 0 3-.5 1.1-.5 1.9-1.3 2.6-2.4l1-1.8.1-.3 1-1.9c1.7-3 4.4-6.6 10.7-9.6.2-.1.5 0 .5.1zM79 38.2c0 .2 0 .4.2.5a21.6 21.6 0 0 1 11.5 11l.2.2 1 1.9c.8 1.1 1.6 2 3 2.6 1.3.5 2.4.7 3.4.6 1-.1 1.7-.5 2.3-1 1.2-1 1.9-2.5 2.4-3.7 0-.2 0-.4-.2-.5-.2 0-.4 0-.5.2a8.5 8.5 0 0 1-2.2 3.5c-.5.4-1.1.7-2 .7-.7.1-1.7 0-3-.5-1-.4-1.8-1.2-2.5-2.3a23.8 23.8 0 0 1-1.2-2l-1-1.9c-1.7-3-4.5-6.5-10.9-9.5-.1 0-.4 0-.5.2z"/></g><path fill="#CED6D9" d="M25.2 100a7.4 7.4 0 1 1 0 14.7 7.4 7.4 0 0 1 0-14.8zm82 0a7.4 7.4 0 1 1 0 14.7 7.4 7.4 0 0 1 0-14.8zm-82-19.4a7.4 7.4 0 1 1 0 14.8 7.4 7.4 0 0 1 0-14.8zm82 0a7.4 7.4 0 1 1 0 14.8 7.4 7.4 0 0 1 0-14.8z"/><path fill="#000" d="M25.2 80.3a7.7 7.7 0 0 0-7.8 7.7h.4-.4a7.7 7.7 0 1 0 7.8-7.7zm0 .7a7 7 0 0 0-7 7 7 7 0 1 0 7-7zm82-.7a7.7 7.7 0 0 0-7.8 7.7m7.8-7.7a7.7 7.7 0 1 1-7.8 7.7m7.8-7a7 7 0 0 0-7 7 7 7 0 1 0 7-7zM29 101.5a7 7 0 0 0-4-1.2v-.4.4a7 7 0 0 0-7 7 7 7 0 1 0 11-5.8zm-4-2a7.7 7.7 0 0 0-7.7 7.8h.4-.4a7.8 7.8 0 1 0 7.8-7.8m85.9 2a7 7 0 1 0-7.8 11.6 7 7 0 0 0 7.8-11.6zm-4-2a7.8 7.8 0 1 1-7.7 7.8m7.8-7.8a7.7 7.7 0 0 0-7.8 7.8"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h128v128H0z"/></clipPath></defs></g></svg>

    这就是使用 Inkscape 减少 SVG 重量的方法。

    • 1
  2. Alexandr_TT
    2022-12-24T14:57:00Z2022-12-24T14:57:00Z

    这个附加帖子不是答案,而是回答@stylok的评论

    使它几乎无法对动画进行任何严肃的操作

    Jake Archibald的 SVGOMG SVG 优化器是目前数百万开发人员使用的最佳优化器。它消除了 Inkscape 中所有不必要的开销,例如:

    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:xlink="http://www.w3.org/1999/xlink"
       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    

    并允许您删除多余的小数位,从而显着降低 SVG 的重量。

    SVGOMG 不会使 SVG 源对带有 的动画有效或无效stroke-dashoffset,因为它完全取决于形状的 SVG 轮廓的绘制方式。

    如果 SVG 形状是用双路径绘制的,那么线条绘制动画将不容易看到,因为路径靠得很近。

    只有一种出路——用单轮廓代替双轮廓。

    在此处输入图像描述

    我将展示我在Winter Bash比赛中的回答如何使用动画。正在绘制 svg 假发图标的单个轮廓(线)。还有额外的动画,我没有剪掉。如果需要,我可以删除多余的部分。

    <svg width="200" height="200" fill="none" viewBox="0 0 125 125" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="border:0px solid">
     <image xlink:href="https://isstatic.askoverflow.dev/bohfJ.jpg" width="100%" height="100%" /> 
             <!-- glass -->
       <image xlink:href="https://isstatic.askoverflow.dev/Ll6AQ.png" transform="translate(-70 0)" width="50%" height="100%" >
        <animateTransform id="glass" attributeName="transform" type="translate" values= "30 -40;30 0"  begin="paintCircle.end" dur="1s" fill="freeze" repeatCount="1" />
    </image>
      <g fill="none" stroke="grey" stroke-width="1.5"  transform="translate(-5 -15) scale(0.85,0.8)">
     <path  stroke-dashoffset="672"  stroke-dasharray="672" d="m70.8 60.2-13.7 5-7 3.5-4.4 5.9-.1 40.9v23.7l-.5 3.4c-1.8 6.6-10.4 12.5-17.7 12.6-6.2 0-11.5-4.8-14.1-10.5-1.6-3.5-1-8 0-11.7.7-2.1 3.2-6 3.2-6s-3.6-3.7-4.2-6.8c-.8-5 0-9.5 2.5-13.8 2.3-4 9.9-5.6 9.9-5.6s-1.8-27.3.3-40.5C30.3 26.7 57.4 20 80 20c15.5 0 32.3 7.8 42 19.4 5 5.7 8.1 13 8.2 20.9.3 16 .4 40.2.4 40.2s11.6 2 12.6 15.2c.3 4.2-4.3 12-4.3 12s8.3 9.1 3 18.4a18 18 0 0 1-16 9.3c-9-.5-15.7-10.8-15.7-10.8s.5-43.7-.2-68.5c-.1-3.6-3.4-6.9-6.6-8.5a260 260 0 0 0-20-8.2L80 56.8s-1.9-3.4-2.2-3.4c-.8 0-1.2-1.2-1.5-2-.8-2.3-.6-4.9-.3-7.3.4-2.8.3-6.5 2.7-8.2.5-.3 3.2-1.6 2 0-2.3 3.1-2.3 5.4-2.7 8.2-.3 2.4 0 5 .3 7.3.4 2.8-4.4 6.5-3.6 6.5z" >
        <animate id="contour" attributeName="stroke-dashoffset" begin="1s" dur="4s" values="672;0" fill="freeze" />
          <animate id="paint" attributeName="fill" begin="5.5s" dur="4s" values="#B6BCBE;#E7EEF1" fill="freeze" />
            
     </path>
      
       <path  fill="none" stroke-dashoffset="38" stroke-dasharray="38" d="M33 70.9s4.2 10 11.2 2.5c1-1 1.8-2 2.7-4a19 19 0 0 1 6.6-8.6c3-2.4 6.7-4.3 6.7-4.3" >
         <animate attributeName="stroke-dashoffset" begin="contour.end+0.5s" dur="1s" values="38;0" fill="freeze" />
     </path>
        <path  stroke-dashoffset="38" stroke-dasharray="38"  d="M93.3 56s6.9 3.5 9.7 6.1c1.9 1.8 2.9 4.5 4.6 6.5 2 2.5 3.5 6 6.6 7a6 6 0 0 0 5-1c1.2-.8 2.4-4 2.4-4" >
           <animate attributeName="stroke-dashoffset" begin="contour.end+1s" dur="1s" values="38;0" fill="freeze" />
     </path> 
         <g>
         <path   stroke-dashoffset="56" stroke-dasharray="56" d="M28 106.6c4.2-.2 9.5 4 9.8 8.3.2 4.6-5 10-9.6 10-4.3.1-8.1-4.9-8.2-9.1 0-4.3 3.7-9 8-9.2z"> 
         <animate attributeName="stroke-dashoffset" begin="contour.end+1.5s" dur="1s" values="56;0" fill="freeze" />
     </path>
         <path   stroke-dashoffset="56" stroke-dasharray="56" d="M28 129.7c4.5 0 9.7 5.1 9.5 9.6-.1 4.3-5.3 8.6-9.6 8.4-4-.1-8.2-4.6-8.3-8.6 0-4.2 4.3-9.3 8.5-9.4z" >
           <animate attributeName="stroke-dashoffset" begin="contour.end+1.5s" dur="1s" values="56;0" fill="freeze" />
     </path>
         <path   stroke-dashoffset="56" stroke-dasharray="56" d="M126.7 106.7c4.3 0 9 4.7 9 9 .1 4.1-4.4 8.9-8.6 9-4.2.1-9-4.3-9.2-8.4-.2-4.4 4.5-9.5 8.8-9.6z">
           <animate attributeName="stroke-dashoffset" begin="contour.end+2s" dur="1s" values="56;0" fill="freeze" />
         </path>
         <path    stroke-dashoffset="56" stroke-dasharray="56" d="M126.5 129.7c4.5.1 9.5 5.4 9.3 9.9-.2 4.1-5.3 8.4-9.5 8.1-4.2-.2-8.5-5.2-8.4-9.4.1-4 4.5-8.6 8.6-8.6z" >
            <animate attributeName="stroke-dashoffset" begin="contour.end+2s" dur="1s" values="56;0" fill="freeze" />
         </path>
             <animate id="paintCircle" attributeName="fill" begin="paint.end-1s" dur="1s" values="#B6BCBE;#C7CDD0" fill="freeze" />
          </g>
        </g> 
         </svg>

    • -1

相关问题

  • 字母S怎么画?

  • 在 svg 上绘制按钮

  • 将 viewBox 坐标转换为 svg 并将一个 svg 嵌入到另一个

  • 如何制作圆形箭头?

  • 如何消除 SVG 对象的大小限制不被模糊?

  • 为什么 SVG 不能在 iphone 上正确显示?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5