Как конвертировать SVG в HTML в PNG? - PullRequest
Новая
       21

Как конвертировать SVG в HTML в PNG?

0 голосов
/ 10 марта 2020

У меня есть lo go, который сохраняется как SVG в моей папке активов как lo go. html.

Ниже приведен svg 

<svg class="f2" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" viewBox="0 0 69 15" style="enable-background:new 0 0 69 15;" xml:space="preserve">
    <g>
        <g id="COS_Re-sell_logo">
            <path id="Fill-1" class="st0" d="M1.9,4.9v2.2c0.6-1,1.5-2.4,2.9-2.4c0.3,0,1.1,0,2.3,1.1l-1,1.6C5.8,7.2,5,6.5,4.2,6.5
                            c-0.7,0-2.3,0.8-2.3,2.9v5H0V4.9H1.9" />
            <path id="Fill-3" class="st0" d="M14.7,8.7c0-0.4-0.2-2.4-2.3-2.4c-0.6,0-1.3,0.2-1.8,0.8C10.1,7.7,10,8.3,10,8.7H14.7z
                            M16.4,13.5c-0.6,0.4-1.7,1.1-3.7,1.1c-1,0-2.1-0.1-3.2-1.3C8.2,12,8,10.5,8,9.6c0-3,1.8-4.9,4.4-4.9c2.2,0,3.7,1.6,4,3.7
                            c0.1,0.6,0.1,1.1,0.1,1.4H9.9c0.1,1.4,1,3,3,3c1.2,0,2.4-0.4,3.4-1.2V13.5L16.4,13.5z" />
            <polygon id="Fill-4" class="st0" points="19.1,10.2 42.5,10.2 42.5,9 19.1,9      " />
            <path id="Fill-5" class="st0" d="M50.6,7.4c-1-0.7-1.8-1-2.7-1c-0.9,0-1.2,0.5-1.2,0.9c0,0.6,0.7,1,2,1.7C50,9.7,51,10.7,51,12
                            c0,0.9-0.7,2.7-3.2,2.7c-1.3,0-2.2-0.4-3.1-0.9v-2c1.3,0.9,2.5,1.3,3,1.3c0.6,0,1.4-0.3,1.4-1c0-0.7-0.6-1-1.4-1.5
                            c-1.6-0.9-2.9-1.7-2.9-3.3c0-1.4,1.2-2.5,3-2.5c1.4,0,2.4,0.6,2.9,0.8V7.4" />
            <path id="Fill-6" class="st0" d="M59.4,8.7c0-0.4-0.2-2.4-2.3-2.4c-0.6,0-1.3,0.2-1.8,0.8c-0.5,0.6-0.6,1.1-0.6,1.6H59.4z
                            M61,13.5c-0.6,0.4-1.7,1.1-3.7,1.1c-1,0-2.1-0.1-3.2-1.3c-1.2-1.3-1.4-2.8-1.4-3.7c0-3,1.8-4.9,4.4-4.9c2.2,0,3.7,1.6,4,3.7
                            c0.1,0.6,0.1,1.1,0.1,1.4h-6.6c0.1,1.4,1,3,3,3c1.2,0,2.4-0.4,3.4-1.2V13.5L61,13.5z" />
            <polygon id="Fill-9" class="st0" points="67.1,14.4 69,14.4 69,0 67.1,0      " />
            <polygon id="Fill-8" class="st0" points="63.1,14.4 65,14.4 65,0 63.1,0      " />
        </g>
    </g>
</svg>

Как мне поменять его на png и воткнуть этот lo go в шапку моего сайта?

Ответы [ 2 ]

0 голосов
/ 10 марта 2020

Вы можете сделать это здесь с этим кодом 

<script>
(function(w,d) {
   'use strict';

   var btn = d.querySelector( 'button' );
   var svg = d.querySelector( 'svg' );
   var canvas = d.querySelector( 'canvas' );

   var imageName ='your-image-name';

function triggerDownload ( imgURI ) {
   var evt = new MouseEvent( 'click', {
       view: w,
       bubbles: false,
       cancelable: true
    });

   var a = d.createElement( 'a' );
       a.setAttribute( 'download', imageName + '.png' );
       a.setAttribute( 'href', imgURI );
       a.setAttribute( 'target', 'blank' );
       a.dispatchEvent(evt);
    }

   btn.addEventListener( 'click', function () {

   var ctx = canvas.getContext( '2d' );
   var data = ( new XMLSerializer() ).serializeToString( svg );
   var DOMURL = w.URL || w.webkitURL || w;

   var img = new Image();
   var svgBlob = new Blob( [data], { type: 'image/svg+xml;charset=utf-8' } );
   var url = DOMURL.createObjectURL( svgBlob );

   img.onload = function () {
       ctx.drawImage( img, 0, 0 );
       DOMURL.revokeObjectURL( url );

    var imgURI = canvas
        .toDataURL( 'image/png' )
        .replace( 'image/png', 'image/octet-stream' );

    triggerDownload( imgURI );
  };
    img.src = url;
    d.querySelector( 'h2' ).classList.remove( 'hide' );
 });
}(window, document));
</script>

https://jsfiddle.net/x4okm30f/

Источник: https://www.sitepoint.com/community/t/converting-an-svg-path-to-a-png/279026/9

Я также хотел бы добавить, что вы должны сохранить свое изображение в формате svg, так как у вас наилучшее качество при минимальном размере, и, поместив непосредственно код в html, вам также не нужно загружать другой файл. .

0 голосов
/ 10 марта 2020

Вы можете использовать онлайн-инструмент, я позволю вам найти правильный, прибегая к гуглу что-то вроде «SVG to PNG», а затем включите ваш png с <img src="images/logo.png" alt="Your logo">

...