snibgo wrote:Inkscape v0.48 and v0.91 can render base64 embedded in SVG.
Seems like you're right. There were some issues with the SVG code (complained something about
If you try the following two filters:
Code: Select all
<filter id="pr_dropshadow_real_1" x="-40%" y="0" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur"></feGaussianBlur>
<feOffset dx="20" dy="0" result="offsetblur"></feOffset>
<feOffset dx="-20" dy="0" result="offsetblur2" in="blur"></feOffset>
<feOffset dx="0" dy="25" result="offsetblur3" in="blur"></feOffset>
<feComponentTransfer result="shadow1" in="offsetblur">
<feFuncA type="linear" slope="0.30"></feFuncA>
</feComponentTransfer>
<feComponentTransfer result="shadow2" in="offsetblur2">
<feFuncA type="linear" slope="0.30"></feFuncA>
</feComponentTransfer>
<feComponentTransfer result="shadow3" in="offsetblur3">
<feFuncA type="linear" slope="0.30"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode in="shadow1"></feMergeNode>
<feMergeNode in="shadow2"></feMergeNode>
<feMergeNode in="shadow3"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="pr_dropshadow_real_2" x="-40%" y="0" width="200%" height="200%">
<feOffset dx="-5" dy="5"></feOffset>
<feGaussianBlur stdDeviation="10" result="offset-blur"></feGaussianBlur>
<feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"></feComposite>
<feFlood flood-color="black" flood-opacity="1" result="color"></feFlood>
<feComposite operator="in" in="color" in2="inverse" result="shadow"></feComposite>
<feComponentTransfer in="shadow" result="shadow">
<feFuncA type="linear" slope="1.2"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode></feMergeNode>
</feMerge>
</filter>
Code: Select all
<text id="text_field_shadow_1" x="??" y="??" width="3300" height="1300" fill="#0000b5" font-family="SomeFont" filter="url(#pr_dropshadow_real_1)" stroke-linecap="butt" stroke-linejoin="miter" style="font-size: 1010px;">Oliver</text>
<text id="text_field_1" x="??" y="??" width="3300" height="1300" stroke="" stroke-width="4" fill="#ffffff" font-family="SomeFont" filter="url(#pr_dropshadow_real_2)" stroke-linecap="butt" stroke-linejoin="miter" style="font-size: 1010px;">Oliver</text>
The reason why the shadow is so thick, is because filter pr_dropshadow_real_1 contains three different shadows. This is because browsers didn't show any shadow at all if I only used one (also it was kind of misplaced, didn't cover everything like it should do). When I only use one shadow, it looks very good when the image is rendered using Inkscape. However, I need to have them both look similar to eachother.
I don't know if I'm creating the shadow incorrectly, or what the issue could be.. Maybe there's another way of doing the shadow?
This is exactly how the shadow should look like:
With my new image, that I generated with Inkscape, the color is a bit lighter, but it's still much more visible than it is when you view it using any web browser. Do you think I can improve the filter, so that it looks same in both browsers and Inkscape?
Thank you, once again.
