SVG test case - Noise filter Vs. Pattern filter Vs. Pattern
The current trends of Internet (2016) and development of applications are strongly bounded with "Flat design". These trends are changing rapidly in present digital world. This change is driven by unbroken need of creative people to move the borders and to find new solutions. This article is not providing answer on what will be the new trends, but it suppose to inspire you to ''taste'' the web/application design.
This test case is focused on creation and use of noise patterns in SVG by 3 different ways:
Case One - Use SVG filters to generate fractal noise pattern
Case Two - Use SVG filters to generate tileable noise pattern
Case Three - Use SVG pattern to generate noise pattern
It is commonly know fact that SVG is using its own coordination system, so it is not surprise that in all cases is visual result better than in 1:1 display. The more the source graphics is modified (large scaling up/down) the more the rendering inconsistencies appear across various devices and browsers.
Case One
We will use prepared filters SALT, PEPPER, SAND and their variations.
Here is short overview how these filter effects are working (how are they built).
<filter x="0%" y="0%" width="100%" height="100%" id="SAND_light-medium" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB"> <!-- generation of noise pattern (full coloured) by using of SVG filter feTurbulence --> <feTurbulence type="fractalNoise" result="f1" stitchTiles="noStitch" baseFrequency="0.6" numOctaves="1" seed="0" /> <!-- transcription to black/white mode and specification of tonal borders, so the required amounts of fragments are achieved --> <feColorMatrix type="matrix" values="-18 0 0 0 8 -18 0 0 0 8 -18 0 0 0 8 0 0 0 0 1" in="f1" result="f2" /> <!-- transparent background - in this way we will see only the pattern fragments --> <feColorMatrix type="luminanceToAlpha" in="f2" result="f3" /> <!-- intersection of the pattern with original object (or vice versa) --> <feComposite in="SourceGraphic" in2="f3" result="f4" operator="in" /> <!-- invert of colour - SALT, set up of brightness - SAND. (Note: this step is not used in effect PEPPER) --> <feColorMatrix type="matrix" values="1 0 0 0 0.22 0 1 0 0 0.22 0 0 1 0 0.22 0 0 0 1 0" in="f4" result="f5" /> <!-- at the end is the connection of pattern with original object --> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode in="f5" /> </feMerge> </filter>
Case Two
Instead of generation of fractal noise as it was done in Case One, we will use encoded SVG string as a source of tileable pattern.
<filter x="0%" y="0%" width="100%" height="100%" id="SANDTILE_light-medium" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB"> <!-- load tileable pattern by using of SVG filter feImage --> <!-- alternatively it is possible to use base64 encoded png or directly external file when you are using "inline SVG". --> <feImage width="64px" height="64px" xlink:href="data:image/svg+xml,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3e%3cpolyline fill='none' stroke='%23000' stroke-width='2' stroke-dasharray='2 6 2 2 2 8 2 5 2 3 2 7 2 4 2 6 2 5 2 7 2 5 2 4 2 6 2 4 2 8 2 6 2 3 2 8 2 2 2 4 2 5 2 2 2 7 2 3 2 4 2 5 2 2 2 8 2 3' points='63,0 63,64 61,64 61,0 59,0 59,64 57,64 57,0 55,0 55,64 53,64 53,0 51,0 51,64 49,64 49,0 47,0 47,64 45,64 45,0 43,0 43,64 41,64 41,0 39,0 39,64 37,64 37,0 35,0 35,64 33,64 33,0 31,0 31,64 29,64 29,0 27,0 27,64 25,64 25,0 23,0 23,64 21,64 21,0 19,0 19,64 17,64 17,0 15,0 15,64 13,64 13,0 11,0 11,64 9,64 9,0 7,0 7,64 5,64 5,0 3,0 3,64 1,64 1,0'/%3e%3c/svg%3e" result="f1"/> <!-- repeat loaded pattern with feTile filter to fill the full area of the original object --> <feTile in="f1" result="f2"/> <!-- intersection of created pattern with original object --> <feComposite in="SourceGraphic" in2="f2" result="f3" operator="in" /> <!-- set up of the brightness --> <feColorMatrix type="matrix" values="1 0 0 0 0.22 0 1 0 0 0.22 0 0 1 0 0.22 0 0 0 1 0" in="f4" result="f5" /> <!-- the end - connection of the pattern with original object --> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode in="f4" /> </feMerge> </filter>
Case Three
In this case we will not use filters, only defined SVG pattern, which simulates the noise.
<pattern id="SAND-PATTERN" patternUnits="userSpaceOnUse" width="100" height="100"> <g fill="none" stroke="#fff" opacity="1"> <polyline stroke-dasharray="1 3 1 4 1 5 1 4 1 8 1 3 1 6 1 6 1 3 1 5 1 4 1 3 1 5 1 3 1 5 1 3 1 4 1 5 1 4 1 3 1 4 1 3 1 5 1 3 1 5 1 4 1 4 1 5 1 3 1 4 1 6 1 4 1 6 1 3 1 6 1 4 1 3 1 5 1 4 1 6 1 5 1 4 1 5 1 4 1 4 1 6 1 3 1 5 1 4 1 6 1 4 1 4 1 6 1 5 1 3 1 4 1 4 1 3 1 6 1 6 1 6 1 5 1 5 1 4 1 4 1 4 1 4 1 4 1 6 1 3 1 6 1 4 1 5 1 6 1 6 1 5 1 3 1 5 1 3 1 5 1 3 1 4 1 5 1 6 1 3 1 6 1 4 1 3 1 6 1 4 1 6 1 5 1 5 1 3 1 3 1 3 1 5 1 4 1 5 1 4 1 3 1 4 1 5 1 6 1 4 1 6 1 4 1 4 1 4 1 4 1 3 1 6 1 3 1 4 1 3 1 3 1 6 1 5 1 4 1 5 1 4 1 4 1 4 1 6 1 6 1 5 1 5 1 5 1 6 1 6 1 6 1 6 1 6 1 3 1 4 1 4 1 3 1 6 1 6 1 4 1 3 1 6 1 6 1 3 1 6 1 3 1 5 1 3 1 3 1 5 1 4 1 4 1 3 1 6 1 3 1 3 1 4 1 5 1 6 1 3 1 6 1 3 1 5 1 3 1 5 1 5 1 3 1 4 1 5 1 6 1 4 1 6 1 3 1 4 1 6 1 3 1 3 1 3 1 4 1 5 1 3 1 4 1 4 1 5 1 5 1 5 1 4 1 5 1 5 1 5 1 5 1 5 1 6 1 4 1 6 1 5 1 4" points="0.5,0 0.5,99.5 1.5,99.5 1.5,0.5 2.5,0.5 2.5,99.5 3.5,99.5 3.5,0.5 4.5,0.5 4.5,99.5 5.5,99.5 5.5,0.5 6.5,0.5 6.5,99.5 7.5,99.5 7.5,0.5 8.5,0.5 8.5,99.5 9.5,99.5 9.5,0.5 10.5,0.5 10.5,99.5 11.5,99.5 11.5,0.5 12.5,0.5 12.5,99.5 13.5,99.5 13.5,0.5 14.5,0.5 14.5,99.5 15.5,99.5 15.5,0.5 16.5,0.5 16.5,99.5 17.5,99.5 17.5,0.5 18.5,0.5 18.5,99.5 19.5,99.5 19.5,0.5 20.5,0.5 20.5,99.5 21.5,99.5 21.5,0.5 22.5,0.5 22.5,99.5 23.5,99.5 23.5,0.5 24.5,0.5 24.5,99.5 25.5,99.5 25.5,0.5 26.5,0.5 26.5,99.5 27.5,99.5 27.5,0.5 28.5,0.5 28.5,99.5 29.5,99.5 29.5,0.5 30.5,0.5 30.5,99.5 31.5,99.5 31.5,0.5 32.5,0.5 32.5,99.5 33.5,99.5 33.5,0.5 34.5,0.5 34.5,99.5 35.5,99.5 35.5,0.5 36.5,0.5 36.5,99.5 37.5,99.5 37.5,0.5 38.5,0.5 38.5,99.5 39.5,99.5 39.5,0.5 40.5,0.5 40.5,99.5 41.5,99.5 41.5,0.5 42.5,0.5 42.5,99.5 43.5,99.5 43.5,0.5 44.5,0.5 44.5,99.5 45.5,99.5 45.5,0.5 46.5,0.5 46.5,99.5 47.5,99.5 47.5,0.5 48.5,0.5 48.5,99.5 49.5,99.5 49.5,0.5 50.5,0.5 50.5,99.5 51.5,99.5 51.5,0.5 52.5,0.5 52.5,99.5 53.5,99.5 53.5,0.5 54.5,0.5 54.5,99.5 55.5,99.5 55.5,0.5 56.5,0.5 56.5,99.5 57.5,99.5 57.5,0.5 58.5,0.5 58.5,99.5 59.5,99.5 59.5,0.5 60.5,0.5 60.5,99.5 61.5,99.5 61.5,0.5 62.5,0.5 62.5,99.5 63.5,99.5 63.5,0.5 64.5,0.5 64.5,99.5 65.5,99.5 65.5,0.5 66.5,0.5 66.5,99.5 67.5,99.5 67.5,0.5 68.5,0.5 68.5,99.5 69.5,99.5 69.5,0.5 70.5,0.5 70.5,99.5 71.5,99.5 71.5,0.5 72.5,0.5 72.5,99.5 73.5,99.5 73.5,0.5 74.5,0.5 74.5,99.5 75.5,99.5 75.5,0.5 76.5,0.5 76.5,99.5 77.5,99.5 77.5,0.5 78.5,0.5 78.5,99.5 79.5,99.5 79.5,0.5 80.5,0.5 80.5,99.5 81.5,99.5 81.5,0.5 82.5,0.5 82.5,99.5 83.5,99.5 83.5,0.5 84.5,0.5 84.5,99.5 85.5,99.5 85.5,0.5 86.5,0.5 86.5,99.5 87.5,99.5 87.5,0.5 88.5,0.5 88.5,99.5 89.5,99.5 89.5,0.5 90.5,0.5 90.5,99.5 91.5,99.5 91.5,0.5 92.5,0.5 92.5,99.5 93.5,99.5 93.5,0.5 94.5,0.5 94.5,99.5 95.5,99.5 95.5,0.5 96.5,0.5 96.5,99.5 97.5,99.5 97.5,0.5 98.5,0.5 98.5,99.5 99.5,99.5 99.5,0.5"/> </g> </pattern>
Following are two Live Preview which are used for testing of the display and speed performance across the browsers and devices.
SVG is implemented in three versions: as IMG, as OBJECT and as inline SVG.
It is important to consider which solution is the best for certain situation, as each has its advantages and limits. Only ''the best Chef'' knows that you must be careful with salt & pepper ;). Below you can download and use for free the source codes, including the HTML.
DOWNLOAD source files .zip More information on how to Import and use SVG filters SALT, PEPPER, SAND in Adobe Illustrator you can find in this article:
Import and use SVG filters in Adobe Illustrator - Spicing up illustrations
BACK