Illustrator SVG Effects Coding Issues

Discuss SVG code, accessible via the XML Editor.
shrimpwagon
Posts: 7
Joined: Fri Nov 11, 2011 9:39 am

Illustrator SVG Effects Coding Issues

Postby shrimpwagon » Fri Nov 11, 2011 9:57 am

I realize this doesn't have much to do with Inkscape but I figured this would be a good place to start.

I am having some REAL big problems coding SVG XML and having it being reproduced in Illustrator as I am expecting. Major problem right now is the feColorMatrix effect. I understand the effect and how the matrix changes the pixels but problem I am having is that when I specify 0.5 as the final output result on any of the color channel rows, Illustrator is not interpreting 0.5 as RGB 127, in other words, 50% the color value. It is more like 0.215 equates to 127 RGB decimal. Here is some code:

Code: Select all

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   version="1.2"
   viewBox="0 0 576 432"
   width="576"
   height="432"
   baseProfile="tiny"
   id="NicoleLovesSVG">
   <g id="Canvas">
      <rect
         width="576"
         height="432"
         x="0"
         y="0"
         transform="scale(1,1)"
         id="Canvas-Rect1"
         style="fill:#9d8654;fill-rule:evenodd;" />
   </g>
   <defs>
      <filter id="ShadowFilter-Text1" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" width="200%" height="200%" x="-50%" y="-50%">
         <feGaussianBlur in="SourceAlpha" stdDeviation="0,0"/>
         <feColorMatrix type="matrix"
            values="0 0 0 0 .5
               0 0 0 0 0
               0 0 0 0 0
               0 0 0 1 0"/>
         <feOffset dx="24.395183950936" dy="24.395183950936" result="shadow"/>
         <feBlend in="SourceGraphic" in2="shadow" mode="normal"/>
      </filter>
   </defs>
   <g
      id="Text1"
      transform="translate(1.1272727272727,297.27272727273) rotate(0) scale(3.5238813920454546,2.642911044034091)"
      style="fill:#003300;fill-opacity:1;fill-rule:evenodd;stroke:#ff0000;stroke-width:15px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;"
      filter="url(#ShadowFilter-Text1)">
         <g
            id="Text1-Line1"
            transform="translate(0,0)">
            <path
               transform="translate(0,0)"
               vector-effect="non-scaling-stroke"
               id="Text1-Line1-Glyph1"
               d="M 0,0 M 46.4,-98.24 L 46.4,-15.68 C 46.4,-8.96 47.466666666667,-3.7333333333333 49.6,-0 L 30.4,-0 C 32.533333333333,-3.7333333333333 33.6,-8.96 33.6,-15.68 L 33.6,-98.24 L 31.36,-98.24 C 21.653333333333,-98.24 12.106666666667,-96.373333333333 2.72,-92.64 L 8.32,-106.72 L 79.68,-106.72 L 74.56,-92.64 C 68.693333333333,-96.48 59.306666666667,-98.346666666667 46.4,-98.24 z" />
         </g>
   </g>
</svg>


As you can see, the first filter retrieves the SourceAlpha which is all black. Then the color matrix takes that and does this on the first row of the matrix:

(a x red) + (b x green) + (c x blue) + (d x alpha) + e = final red output

plugging in the numbers:

(0 x 0) + (0 x 0) + (0 x 0) + (0 x 0) + 0.5 = 0.5

Should be 50% red! Or 127 RGB!!! I did the math and in Illy it is more like 0.215 = 127 = 50% ??????

User avatar
LiquidAsh
Posts: 71
Joined: Fri Apr 22, 2011 11:35 pm
Contact:

Re: Illustrator SVG Effects Coding Issues

Postby LiquidAsh » Sat Nov 12, 2011 12:07 am

Interesting problem. I found that Google Chrome's svg renderer has the same problem as you describe. Inkscape however seems to be producing the colors as expected. I just had to remove the feGaussianBlurr element from your filter to get the rest rendering correctly.

shrimpwagon
Posts: 7
Joined: Fri Nov 11, 2011 9:39 am

Re: Illustrator SVG Effects Coding Issues

Postby shrimpwagon » Sat Nov 12, 2011 2:23 am

The color specifications seems to be an exponential curve. I plotted the output values when specifying .1, .15, .2, .25, etc. and looked at the corresponding RGB decimal value. For example, 0.215 is 127 and 0.5 is 187. Plotting the other decimals shows an exponential curve on a graph. This is very very fishy. Not only is this weird but specifying offset values for the feOffset effect is totally not right either. Am I crazy or is Adobe purposely skewing the values on things that are left up for interpretation in the SVG specifications? Didn't Adobe purchase or obtain EPS and drop it? Probably because it was too open source for them.

I am working out the exponential curve equation now and I'll post the equation when I have it.

Please let me know if there is any more information about this craziness.

Thank you.

shrimpwagon
Posts: 7
Joined: Fri Nov 11, 2011 9:39 am

Re: Illustrator SVG Effects Coding Issues

Postby shrimpwagon » Sat Nov 12, 2011 5:56 am

Why do you suppose this is? Why is there some kind of color curve in Chrome and Illustrator? Where is the math so I can compensate?

shrimpwagon
Posts: 7
Joined: Fri Nov 11, 2011 9:39 am

Re: Illustrator SVG Effects Coding Issues

Postby shrimpwagon » Tue Nov 15, 2011 2:39 am

Wow, I finally figured it out after 2 days, 2 sheets of graphing paper and 5 sheets of blank paper with both sides scribbled on. No thanks to ANYTHING or ANYONE on the internet. I couldn't find the solution anywhere.

User avatar
LiquidAsh
Posts: 71
Joined: Fri Apr 22, 2011 11:35 pm
Contact:

Re: Illustrator SVG Effects Coding Issues

Postby LiquidAsh » Tue Nov 15, 2011 9:23 am

And you're not going to share what you've discovered? Sounds like a good plan for some bad karma to me :).

shrimpwagon
Posts: 7
Joined: Fri Nov 11, 2011 9:39 am

Re: Illustrator SVG Effects Coding Issues

Postby shrimpwagon » Sat Nov 19, 2011 4:43 am

Sorry, I was going to share but I realized the math still doesn't add up.

shrimpwagon
Posts: 7
Joined: Fri Nov 11, 2011 9:39 am

Re: Illustrator SVG Effects Coding Issues

Postby shrimpwagon » Sat Nov 19, 2011 6:16 am

I've tried everything. 0.003921568 gives RGB 0 but 0.003921569 gives RGB 13. It is impossible to even specify a value in between that range. Illustrator is wack and so is Chrome and there is no apparent reason why. AI sucks. I'm just going to duplicate the vector and offset that to make the shadow. That way I can control its color and alpha like normal using HEX. Thanks.

shrimpwagon
Posts: 7
Joined: Fri Nov 11, 2011 9:39 am

Re: Illustrator SVG Effects Coding Issues

Postby shrimpwagon » Wed Nov 23, 2011 1:28 am



Return to “SVG / XML Code”