How to create drop shadow in XML

In this article I have describe about two examples of drop shadow in XML
  • 2193

Read about SVG here

Create a drop shadows in SVG

The <defs> and <filter> are define the SVG filter in XML.

SVG filters is define<defs>element, <defs> element is short the definition and contains definition of filter elements in SVG drop shadow.

The <filter> element is defines all the SVG filters, <filter> has required id attributes and graphics points is use in SVG filters.  

SVG<feoffset>

SVG <feOffset> is create drop shadow and show the shadow of SVG image.

Example1

<?xml version="1.0" encoding="utf-8" ?>

<html>

  <body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

      <defs>

        <filter id="f1" x="0" y="0" width="200%" height="200%">

          <feOffset result="offOut" in="SourceGraphic" dx="40" dy="40" />

          <feColorMatrix result="matrixOut" in="offOut" type="matrix"

          values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />

          <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="7" />

          <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />

        </filter>

      </defs>

      <circle cx="100" cy="50" r="30" stroke="green" stroke-width="3"

      fill="red" filter="url(#f1)" /> />

    </svg>

  </body>

</html>

Output

 shawods.jpg

Define the code

  • XML define the namespace and version use the program.
  • <filter> id is define name of filter, dx and dy of feOffset are axis of the shadow
  • <feBlend> is define sourceGraphics of filter.
  • <circle> is create a circle shape and fill is show the color of the circle.
  • stroke is define the stroke width. 
  • The <circle> element links the element to the "f1" filter

Example2

<html>

  <body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

      <defs>

        <filter id="f1" x="0" y="0" width="200%" height="200%">

          <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />

          <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />

          <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />

        </filter>

      </defs>

    

    <circle cx="200" cy="50" r="30" stroke="green" stroke-width="2"

      fill="red" filter="url(#f1)" /> />

    </svg>

  </body>

</html>

Output

 shadow2.jpg

Define the code

  • XML define the namespace and version use the program.
  • <filter> id is define name of filter, dx and dy of feOffset are axis of the shadow
  • <feBlend> is define sourceGraphics of filter.
  • <circle> is create a circle shape and fill is show the same color of the circle.
  • stroke is define the stroke width. 
  • The <circle> element links the element to the "f1" filter

 

You may also want to read these related articles :

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2019 DotNetHeaven. All rights reserved.