SVG Light Source Filter Tutorial

Step 1 Introduction

SVG (Scalable Vector Graphics) has many sets of filter effects that allow to combine the effects and apply the filter of the graphic.

One of the fantastic feature is, SVG filtering revolve around the light source. You can apply the lighting effect to SVG and then control the details through the following three effects: "fePointLight", "feDistantLight" & "feSpotLight". These light source filters allow some special neat capabilities.

Filter Element

element reside in SVG Filter. is a group of different effects , those effects are applied to graphics element like or container element like

Step 2 SVG

<svg>
<defs>
<filter id="car">
< (filter effect) />
< (filter effect) />
</filter>
</defs>
<rect filter="#car" />
</svg>

Attributes

The following attributes, with the exception of "in", are able to use within any SVG filter effect.
• x,y

Using x & y coordinates we can set a minimum coordinates on appropriate axis of the filter will take place.

• result

To assign a name to specific filter effect, we can use "result" attribute. This effect can be follow through the "in" attribute. In, One graphic design element allow to combine several effects. Both effects must resides within the same .

A "result" value is not required, but it is useful when we want to reuse specific effects.

• in

It is use to specify the input for a specific filter effect. There are seven value options hare and "result" is one of them. Perhaps the most frequently referenced are "SourceGraphic" and "SourceAlpha". If the “in” attribute is left unspecified and the filter effect is listed the first within the then it will set default to "SourceGraphic".

Alternatively, if this attribute is left unspecified and is not listed first effect, then the default will inherit the value of the effect before it.

Step 3 Lighting Source Filters

We are familiar with some more attribute of SVG. Now let’s take a look on Lighting Source effects
SVG lighting can accessed through the use of "feDiffuseLighting" or "feSpecularLighting" filters.

While diffuse is light that hits a surface and gets scattered equally in all directions, specular light refers to a bright spot of light that gets reflected in a particular direction. The demo in this blog will only focus on lighting effects accessed through specular light, or "feSpecularLighting", or light that makes all the things look shiny!

"specularConstant" and "specularExponent" filter effects used by Attributes , set the details of the light based on Phong lighting model calculations.

Basic light filter related syntax is as follows.

3.1 SVG

<filter>
<feSpecularLighting>
< (light source effect) />
< (light source effect) />
</feSpecularLighting>
</filter>

Let’s learn something about "fePointLight", "feDistantLight", and "feSpotLight" effects that will reside within the specified calculation.

• fePointLights
While applying "feSpecularLighting" filter "fePointLight" establishes a specific point as the main light source.

• x , y ,z
Determine the location of the light source in the coordinate system on x, y & z axis. "z" will adjust the perceived size of the point of light by determining its location from the point to the user; a higher value here results in a larger point of light that is "closer" to the user.

• feDistantLight
"feDistantLight" use to define a distance Light Source
>> To clockwise direction angle in degrees for the light source on the XY plane, we can use the
"azimuth" attribute within "feDistantLight".
>> The value within 'elevation' defines the direction angle in degrees of the light source from the XY plane towards the z axis.

• feSpotLight
"feSpotLight" defines a spot light as a light source.
>> Establish the location of the light source along with x ,y & z axis
>>"limitingConeAngle" is use to restricts the area to which light is projected by not allowing light to render outside of it. This sets an angel between spot light axis and cone. A higher value here results in a less restricted area.

Step 4 Animating Light Sources

We can also animate Light Sources. The code for graphic is very complex and long when we used inline. For shake of shine, let’s take a sun moving from one side of a car to other side acting as a "Light Source".

The sun, aka our pretend light source, is moving across the screen through "SMIL animations". In changing the sun's position, the light source filter on a car is also being animated.

An element is use to animate each element, which are both noted in the HTML.

4.1 HTML

<div class="contain-demo">
<svg width="375" height="300" viewBox="0 0 375 300">
<desc>Filter to create light on tree graphic.</desc>
<filter id="demo4">
<!--Blur effect-->
<feGaussianBlur stdDeviation="3" result="blur4" />
<!--Lighting effect-->
<feSpecularLighting result="spec4" in="blur4" specularExponent="35" lighting-color="#cccccc">
<!--Light source effect-->
<fePointLight x="75" y="100" z="200">
<!--Lighting Animation-->
<animate attributeName="x" values="75;320;75" dur="10s" repeatCount="indefinite" />
</fePointLight>
</feSpecularLighting>
<!--Composition of inputs-->
<feComposite in="SourceGraphic" in2="spec4" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
</filter>
<desc>Filter to blur sun graphic.</desc>
<filter id="demo5">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur5" />
<!--Composition of inputs-->
<feComposite in="SourceGraphic" in2="blur5" operator="arithmetic" k1="0" k2="3" k3="3" k4="0" />
</filter>
<desc>Tree with three green birds and a sun to demonstrate lighting filter animations.</desc>
<!--Apple tree graphic-->
<g class="tree" filter="url(#demo4)">
 
<path id="svg_11" d="m214.35321,235.3494c1.1564,-0.92241 20.05237,3.7379 18.05603,4.42628c3.09772,0 3.97876,26.44044 2.18903,34.82487c-8.11594,-0.63333 -82.31583,0.07571 -83.5618,0.07571l-46.2657,-0.15146c0.68842,0.59201 -71.01965,-14.51779 11.24805,-39.02396l35.40657,1.06697l5.1181,-12.70052c0.20303,-0.68837 -22.35159,-0.51285 -28.4444,0.50938c2.80446,-0.86526 -12.99167,12.93596 -11.42352,10.51286c1.56807,-2.42378 19.81207,-20.38414 20.48325,-20.06747c22.78522,-6.95947 43.78757,-3.05641 48.32391,-2.36804l21.31897,5.94069l7.55151,16.95467l0,0z" stroke-linecap="round" stroke="#A6BA50" fill="#A6BA50"/>
<path id="svg_12" d="m179.35953,274.50812c0,-5.96069 5.14639,-10.78912 11.5,-10.78912c6.35358,0 11.5,4.82843 11.5,10.78912c0,5.96075 -5.14642,10.78891 -11.5,10.78891c-6.35361,0 -11.5,-4.82816 -11.5,-10.78891z" stroke-linecap="round" stroke-linejoin="null" stroke="#A6BA50" fill="#000000"/>
<ellipse ry="10.66667" rx="12" id="svg_14" cy="274.74104" cx="127.5785" stroke-linecap="round" stroke-linejoin="null" stroke="#A6BA50" fill="#000000"/>
 
<g display="inline">
 
<line fill="none" stroke="#A6BA50" stroke-linejoin="null" stroke-linecap="round" x1="1383" y1="1088" x2="1173" y2="967" id="svg_19"/>
<path fill="none" stroke="#A6BA50" stroke-linejoin="null" stroke-linecap="round" id="svg_21" d="m1386,1088c0,-1 -1.74023,-2.24011 -11,-12c-14.60046,-15.38916 -23.23303,-21.74231 -31,-29c-19.28979,-18.02515 -31.61121,-26.5639 -43,-34c-11.63245,-7.59521 -23.15662,-13.7597 -34,-21c-20.3031,-13.5567 -29.34851,-21.79224 -45,-34c-19.25012,-15.01447 -30.85657,-22.21942 -43,-30c-12.85242,-8.23492 -29.57715,-16.93311 -58,-33c-13.28821,-7.5116 -28.6228,-13.63135 -43,-21c-11.60315,-5.94696 -22.30103,-10.31696 -32,-15c-14.52051,-7.01111 -19.54919,-9.95514 -23,-11c-1.91418,-0.57959 -2,-1 -3,-1c-1,0 -2,0 -3,0c-1,0 -1.87854,-0.49347 -5,-1c-1.97418,-0.32037 -4,-1 -6,-1c-2,0 -4,0 -7,-1l-1,-1l-1,0l-1,0"/>
<path fill="none" stroke="#A6BA50" stroke-linejoin="null" stroke-linecap="round" id="svg_23" d="m222.31708,192.09111c9.00922,-18.47987 14.82704,11.77202 13.75816,9.87202l12.98917,-18.55347" transform="rotate(50, 235.689, 192.73)"/>
<line fill="none" stroke="#A6BA50" stroke-linejoin="null" stroke-linecap="round" x1="1442" y1="1054" x2="1001" y2="852" id="svg_25"/>
<path fill="none" stroke="#A6BA50" stroke-linejoin="null" stroke-linecap="round" id="svg_27" d="m1624,1124c-5,-1 -10.99146,-1.0614 -18,-2c-7.99097,-1.07007 -14.97437,-3.10547 -23,-5c-8.9729,-2.11816 -18,-5 -27,-8c-9,-3 -27.51636,-8.2207 -51,-16c-12.34058,-4.08789 -24.86792,-8.3866 -39,-13c-26.7699,-8.73901 -39.75305,-11.58337 -51,-16c-8.83044,-3.46765 -18,-7 -26,-11c-6,-3 -15.90649,-9.14392 -22,-13c-4.92725,-3.11804 -11.23401,-6.49292 -16,-9c-6.38196,-3.35718 -10.89355,-7.19672 -20,-12c-7.91125,-4.17285 -18.04663,-6.84888 -28,-10c-9.04443,-2.86334 -18.97974,-7.09595 -33,-10c-4.99304,-1.03424 -11.83813,-2.46552 -17,-4c-4.88757,-1.45294 -10.97034,-2.09113 -17,-4c-9.95337,-3.15112 -16,-5 -22,-8l-3,-1l-6,-3l-1,0"/>
</g>
<g>
 
<line fill="none" stroke="#A6BA50" stroke-linejoin="null" stroke-linecap="round" x1="1383" y1="1088" x2="1173" y2="967" id="svg_35"/>
<path fill="none" stroke="#A6BA50" stroke-linejoin="null" stroke-linecap="round" d="m1386,1088c0,-1 -1.74023,-2.24011 -11,-12c-14.60046,-15.38916 -23.23303,-21.74231 -31,-29c-19.28979,-18.02515 -31.61121,-26.5639 -43,-34c-11.63245,-7.59521 -23.15662,-13.7597 -34,-21c-20.3031,-13.5567 -29.34851,-21.79224 -45,-34c-19.25012,-15.01447 -30.85657,-22.21942 -43,-30c-12.85242,-8.23492 -29.57715,-16.93311 -58,-33c-13.28821,-7.5116 -28.6228,-13.63135 -43,-21c-11.60315,-5.94696 -22.30103,-10.31696 -32,-15c-14.52051,-7.01111 -19.54919,-9.95514 -23,-11c-1.91418,-0.57959 -2,-1 -3,-1c-1,0 -2,0 -3,0c-1,0 -1.87854,-0.49347 -5,-1c-1.97418,-0.32037 -4,-1 -6,-1c-2,0 -4,0 -7,-1l-1,-1l-1,0l-1,0" id="svg_36"/>
<path fill="none" stroke="#A6BA50" stroke-linejoin="null" stroke-linecap="round" d="m243.317,163.091c9.009,-18.4798 14.82698,11.772 13.75801,9.87198l12.98898,-18.55298" transform="rotate(50, 256.689, 163.73)" id="svg_37"/>
<line fill="none" stroke="#A6BA50" stroke-linejoin="null" stroke-linecap="round" x1="1442" y1="1054" x2="1001" y2="852" id="svg_39"/>
<path fill="none" stroke="#A6BA50" stroke-linejoin="null" stroke-linecap="round" d="m1624,1124c-5,-1 -10.99146,-1.0614 -18,-2c-7.99097,-1.07007 -14.97437,-3.10547 -23,-5c-8.9729,-2.11816 -18,-5 -27,-8c-9,-3 -27.51636,-8.2207 -51,-16c-12.34058,-4.08789 -24.86792,-8.3866 -39,-13c-26.7699,-8.73901 -39.75305,-11.58337 -51,-16c-8.83044,-3.46765 -18,-7 -26,-11c-6,-3 -15.90649,-9.14392 -22,-13c-4.92725,-3.11804 -11.23401,-6.49292 -16,-9c-6.38196,-3.35718 -10.89355,-7.19672 -20,-12c-7.91125,-4.17285 -18.04663,-6.84888 -28,-10c-9.04443,-2.86334 -18.97974,-7.09595 -33,-10c-4.99304,-1.03424 -11.83813,-2.46552 -17,-4c-4.88757,-1.45294 -10.97034,-2.09113 -17,-4c-9.95337,-3.15112 -16,-5 -22,-8l-3,-1l-6,-3l-1,0" id="svg_41"/>
</g>
<g display="inline">
 
<line fill="none" stroke="#A6BA50" stroke-linejoin="null" stroke-linecap="round" x1="1383" y1="1088" x2="1173" y2="967" id="svg_28"/>
<path fill="none" stroke="#A6BA50" stroke-linejoin="null" stroke-linecap="round" d="m1386,1088c0,-1 -1.74023,-2.24011 -11,-12c-14.60046,-15.38916 -23.23303,-21.74231 -31,-29c-19.28979,-18.02515 -31.61121,-26.5639 -43,-34c-11.63245,-7.59521 -23.15662,-13.7597 -34,-21c-20.3031,-13.5567 -29.34851,-21.79224 -45,-34c-19.25012,-15.01447 -30.85657,-22.21942 -43,-30c-12.85242,-8.23492 -29.57715,-16.93311 -58,-33c-13.28821,-7.5116 -28.6228,-13.63135 -43,-21c-11.60315,-5.94696 -22.30103,-10.31696 -32,-15c-14.52051,-7.01111 -19.54919,-9.95514 -23,-11c-1.91418,-0.57959 -2,-1 -3,-1c-1,0 -2,0 -3,0c-1,0 -1.87854,-0.49347 -5,-1c-1.97418,-0.32037 -4,-1 -6,-1c-2,0 -4,0 -7,-1l-1,-1l-1,0l-1,0" id="svg_29"/>
<path fill="none" stroke="#A6BA50" stroke-linejoin="null" stroke-linecap="round" d="m274.31702,193.091c9.00897,-18.4798 14.82697,11.772 13.758,9.87198l12.98898,-18.55298" transform="rotate(50, 287.689, 193.73)" id="svg_30"/>
<line fill="none" stroke="#A6BA50" stroke-linejoin="null" stroke-linecap="round" x1="1442" y1="1054" x2="1001" y2="852" id="svg_32"/>
<path fill="none" stroke="#A6BA50" stroke-linejoin="null" stroke-linecap="round" d="m1624,1124c-5,-1 -10.99146,-1.0614 -18,-2c-7.99097,-1.07007 -14.97437,-3.10547 -23,-5c-8.9729,-2.11816 -18,-5 -27,-8c-9,-3 -27.51636,-8.2207 -51,-16c-12.34058,-4.08789 -24.86792,-8.3866 -39,-13c-26.7699,-8.73901 -39.75305,-11.58337 -51,-16c-8.83044,-3.46765 -18,-7 -26,-11c-6,-3 -15.90649,-9.14392 -22,-13c-4.92725,-3.11804 -11.23401,-6.49292 -16,-9c-6.38196,-3.35718 -10.89355,-7.19672 -20,-12c-7.91125,-4.17285 -18.04663,-6.84888 -28,-10c-9.04443,-2.86334 -18.97974,-7.09595 -33,-10c-4.99304,-1.03424 -11.83813,-2.46552 -17,-4c-4.88757,-1.45294 -10.97034,-2.09113 -17,-4c-9.95337,-3.15112 -16,-5 -22,-8l-3,-1l-6,-3l-1,0" id="svg_34"/>
</g>
 
</g>
<desc>Yellow sun moving from left to right.</desc>
<circle class="sun" fill="#F9EC48" cx="57" cy="90" r="27" filter="url(#demo5)">
<!--Sun Animation-->
<animate attributeName="cx" values="57;320;57" dur="10s" repeatCount="indefinite" />
<animate attributeName="cy" values="100;70;100;70;100" dur="10s" repeatCount="indefinite" />
</circle>
</svg>
</div>

4.2 CSS

.contain-demo {
  text-align: center;
}

I hope you find this blog is very helpful to you while working with SVG Light Source Filter. Let me know if you have any problem or question regarding CSS 3 please comment here. I will reply you ASAP.

Got an Idea of Web Development? What are you still waiting for? Contact us now and see the Idea live soon. Our company has been named as one of the best Web Development Company in India.

Milind Goratela

I am passionate Web Designer. Love to develop website with HTML 5 and CSS 3. And also like to share tips & tricks about latest web trends