How to Draw a Fill Svg

How to draw a fill svg?

With a nice and simple logo like that, you can easily fake it by using strokes:

1. Add a couple of "fake" lines to your SVG with stroke-width wide enough to cover the logo.
2. Use the original logo path (.st1) as a clipPath on those lines to hide the parts that are outside the logo.
3. Animate the "fake" lines. (How SVG Line Animation Works)

Updated fiddle: https://jsfiddle.net/b4dn44kL/1/

How to do draw animation effect fill SVG?

Because your SVG file is not in the same shape as my logo. can you
please tell me how can I modify the path to achieve the exact same
shape. I don't have much knowledge about the illustrator by the way.

Unfortunately I do not use the illustrator. Path painted in Inkscape

Open the file from the previous answer to edit the path form inInkscape

<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="logo-white" width="184" height="95" viewBox="0 0 184 90.7" version="1.1">

  

  <path class="draw-logo" fill="none" stroke="black" stroke-width="25" d="m81.3 30.4c0 0-11.7-9.8-17.5-13-3.8-2.2-9.9-4.6-15.3-5-5.7-0.4-11.7 0.4-16.8 2.9-4.8 2.3-8.7 6.3-11.8 10.7-3.2 4.5-5.6 9.8-6.3 15.2-0.9 6.2-0.4 12.9 2.3 18.6 2.7 5.7 7.5 10.6 12.9 13.8 5.2 3.1 11.6 4.8 17.7 4.5 5.8-0.2 11.6-2.7 16.6-5.7 21.6-13.1 34.2-37.9 55.1-52.2 5.8-4 12.1-8.3 19-9.1 5.7-0.6 11.9 0.9 16.8 3.9 6.7 4.1 12.3 10.6 15.2 17.9 2.8 6.9 3.4 15.1 1.4 22.2-1.8 6.3-6 12.2-11.3 16.1-6.3 4.6-14.5 7.8-22.2 7C127.1 77.2 118.6 70.3 111.3 63.7 104.7 57.8 95.9 42 95.9 42" />

  

</svg>

How to make a curved fill in SVG

Is this what you are looking for?

<svg viewBox="0 0 100 200" width="300" xmlns="http://www.w3.org/2000/svg">

  <g>

    <path d="

      M 50, 100

      m 25, 0

      a 25,25 0 1,0 -50,0

      h 10

      A20,20 0 0,1 75,100z" />

  </g>

</svg>

Change svg fill color and then draw to canvas

The trick is to load your svg as XML via XHR and manipulate it any way you want, then create your image out of it using data:image format.

E.g.

$.get('img/bottomLeftTop.svg', function(svgXml) {
  var img = new Image();
  var coloredSvgXml = svgXml.replace(/#3080d0/g,'#e05030');
  img.src = "data:image/svg+xml;charset=utf-8,"+coloredSvgXml;
  context.drawImage(img,0,0);
});

Here is a snippet I created to demonstrate the manipulation principle. It uses in-html hidden svg node to draw on 2d canvas, then changes the color via regexp and draws on the same canvas again:

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

var svg = document.getElementById('tmpSvg')

var blueCircle = (new XMLSerializer).serializeToString(svg);

var img = new Image();

img.src = "data:image/svg+xml;charset=utf-8," + blueCircle;

context.drawImage(img, 0, 0);

redCircle = blueCircle.replace(/#3080d0/g, '#e05030');

img = new Image();

img.src = "data:image/svg+xml;charset=utf-8," + redCircle;

context.drawImage(img, 10, 10);

.wrapper {

  display: none;

}

#canvas {

  width: 400px;

  height: 300px;

}

<canvas id="canvas"></canvas>

<div class="wrapper">

  <svg id="tmpSvg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">

    <style>

      circle {

        fill-opacity: 0.5;

        stroke-width: 4;

        fill: #3080d0;

        stroke: #3080d0;

      }

    </style>

    <circle id="my-circle" cx="50" cy="50" r="30" />

  </svg>

</div>

How to change the color of an svg element?

You can't change the color of an image that way. If you load SVG as an image, you can't change how it is displayed using CSS or Javascript in the browser.

If you want to change your SVG image, you have to load it using <object>, <iframe> or using <svg> inline.

If you want to use the techniques in the page, you need the Modernizr library, where you can check for SVG support and conditionally display or not a fallback image. You can then inline your SVG and apply the styles you need.

See :

#time-3-icon {

   fill: green;

}

.my-svg-alternate {

  display: none;

}

.no-svg .my-svg-alternate {

  display: block;

  width: 100px;

  height: 100px;

  background-image: url(image.png);

}

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">

<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206

 C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161

 C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505

 c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081

 c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>

</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

Make an SVG fill the entire page exactly

You might need to zero out the default margin and padding in CSS like:

html, body, * { 
     margin: 0; 
     padding: 0; 
}

How to fill SVG path with color upto a specific distance?

You can do it with stroke-dasharray:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<defs>
<style>
path{
  stroke-width: 10;
}
</style>
</defs>
<path d="M 10 10 l 100 0 c 10 10 10 10 0 50 l -100 0" stroke="black" fill="transparent" />
<path d="M 10 10 l 100 0 c 10 10 10 10 0 50 l -100 0" stroke="red" fill="transparent" pathLength="1" stroke-dasharray="0.6 0.4"/>
</svg>

---

Related Topics