wp-svg-spritemap, 在—中管理 SVG spritemap,使用 SVGs

分享于 

3分钟阅读

GitHub

  繁體 雙語
Use SVGs in WordPress — Manage an SVG spritemap
  • 源代码名称:wp-svg-spritemap
  • 源代码网址:http://www.github.com/jonathantneal/wp-svg-spritemap
  • wp-svg-spritemap源代码文档
  • wp-svg-spritemap源代码下载
  • Git URL:
    git://www.github.com/jonathantneal/wp-svg-spritemap.git
    Git Clone代码到本地:
    git clone http://www.github.com/jonathantneal/wp-svg-spritemap
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/jonathantneal/wp-svg-spritemap
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    SVG Spritemap

    收费 Spritemap 是一个支持你在媒体上传器中添加和管理一个 SVG Spritemap的 WordPress插件插件。

    Screenshot

    • 安装并激活WordPress插件。
    • 通过媒体上传器添加SVG图像。
    • 设置媒体> 中选择 SVGs Spritemap收费 SVG。

    在选择和更新spritemap的SVGs之后,将自动生成一个组合的defs.svg SVG spritemap。

    使用图标

    文本字段显示了 SVG spritemap的URL。 子画面可以通过附加 #: 和子画面的名字来引用。

    <svg><usexlink:href="http://dev.wordpress/wp-content/plugins/svg-spritemap/defs.svg#:accounts"></svg>

    Shortcode

    在编辑器中使用 [svgmap] shortcode简化包含在Wordpress内的图标。 在页面/post中设置必需的sprite 属性,并使用所需的SVG映像插入 <svg> 标记。 所有其他的冒号参数将作为属性添加到插入的<svg> 中,允许你设置 classfillwidthheight 和更多。

    Shortcode

    [svgmap sprite="accounts" width="100" height="100" fill="#F00" class="icon"]

    输出:

    <svgwidth="100"height="100"fill="#F00"class="icon"><usexlink:href="http://dev.wordpress/wp-content/plugins/svg-spritemap/defs.svg#:accounts"></svg>

    注意:要更改SVG的或者 stroke,不要在上传的SVG中包括这些属性。 svg的包含属性覆盖了 <use> 或者 <svg> 上设置的任何。

    大小

    虽然spritemap的实时估计大小表示所有单个SVGs的组合大小,但它并不考虑额外的gzip压缩。 比较可以能的是,估计是保守的,而且文件的质量实际上比估计值小。

    浏览器支持

    IE 需要特殊协助来显示外部 SVGs。 为了解决这个问题,我开发了 SVG4Everybody插件。


    相关文章