PDA

View Full Version : SVG alpha mask not loading properly?



Grain
1st November 2012, 05:05
I can't get my svg file to render it's alpha mask.

maxIcon16.svg:

<svg baseProfile="tiny" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="maskedRect1">
<path d="m4,2h10v10h-10z" fill="#fff"/>
<path d="m5,3h8v8h-8z"/>
<path d="m3,5h8v8h-8z"/>
</mask>
<mask id="maskedRect2">
<path d="m2,4h10v10h-10z" fill="#fff"/>
<path d="m3,5h8v8h-8z"/>
</mask>
</defs>
<title>Maximized</title>
<path d="m4,2h10v10h-10z" mask="url(#maskedRect1)"/>
<path d="m2,4h10v10h-10z" mask="url(#maskedRect2)"/>
</svg>

maxIcon16.pyw:

# !/usr/bin/env python3
# encoding: utf-8
#
import sys
from PyQt4.QtCore import QSize
from PyQt4.QtGui import QApplication
from PyQt4.QtSvg import QSvgWidget

if __name__ == '__main__':
app = QApplication(sys.argv)

widget = QSvgWidget('./maxIcon16.svg')
widget.setMinimumSize(QSize(128, 128))
widget.show()

sys.exit(app.exec_())

I went about it using QPixmap and QIcon as well but without any luck...

Here's the same svg only with size constraints and in a slightly more readable syntax:

maxIcon16_RAW.svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink/" baseProfile="tiny" version="1.2">
<title>Maximized</title>
<defs>
<mask id="maskedRect1">
<rect x="4" y="2" width="10" height="10" style="fill:white"/>
<rect x="5" y="3" width="8" height="8" style="fill:black"/>
<rect x="3" y="5" width="8" height="8" style="fill:black"/>
</mask>
<mask id="maskedRect2">
<rect x="2" y="4" width="10" height="10" style="fill:white"/>
<rect x="3" y="5" width="8" height="8" style="fill:black"/>
</mask>
</defs>
<rect x="4" y="2" width="10" height="10" style="fill:black" mask="url(#maskedRect1)"/>
<rect x="2" y="4" width="10" height="10" style="fill:black" mask="url(#maskedRect2)"/>
</svg>

I wrote the svg using a text editor so I can't be 100% sure it's not the svg it's self. But it's just a simple mask and it loads just fine in firefox and illustrator...

mvuori
2nd November 2012, 08:37
Still, the first thing to do is obviously to check the SVG with a SVG validator, such as the one from W3C
http://validator.w3.org/check

Grain
2nd November 2012, 14:57
Still, the first thing to do is obviously to check the SVG with a SVG validator, such as the one from W3C
http://validator.w3.org/check

Thanks for the tip !
The first svg passed as an xml while the second didn't pass nothing :( I'll review the specification (http://www.w3.org/TR/SVGMobile12/) again to make sure I'm using everything by the book. Thanks !

EDIT: In case anyone curious: It seems SVG Tiny 1.1 doesn't support mask quite the same (http://www.w3.org/TR/SVGMobile11/#sec-clipping) (if at all?) as SVG 1.1 . SVG Tiny 1.2 doesn't even mention it in the specs excepts mentioning full backwards compatibility. I might still be able to mask it since "Also, in SVGB, clipping paths are restricted to rectangles ('rect' elements or references to 'rect' elements through 'use')"(tiny 1.1 specs) but I'll have to try and make sure...

2nd EDIT: I can't even make the SVG Test Suite example for clipPath to work (http://www.w3.org/Graphics/SVG/Test/20011026/masking-clipPath-BE-01.svg). I'm guessing that when the specs said "SVGT does not support element opacity, fill-opacity, stroke-opacity properties" (http://www.w3.org/TR/SVGMobile/#sec-clipping) - SVGT meaning SVG Tiny - Qt figured it's ok to drop opacity of any kind - masking and clipping included - altogether. Google'ing "qt clip-path" lead me to places like these http://qt-project.org/forums/viewthread/420 (http://qt-project.org/forums/viewthread/420) so I think I'll be avoiding clipping and masking in svgs from now on.

Grain
2nd November 2012, 18:22
Still, the first thing to do is obviously to check the SVG with a SVG validator, such as the one from W3C
http://validator.w3.org/check

Thanks for the tip !
The first svg passed as an xml while the second didn't pass nothing :( I'll review the specification (http://www.w3.org/TR/SVGMobile12/) again to make sure I'm using everything by the book. Thanks !

EDIT: In case anyone curious: It seems SVG Tiny 1.1 doesn't support mask quite the same (http://www.w3.org/TR/SVGMobile11/#sec-clipping) (if at all?) as SVG 1.1 . SVG Tiny 1.2 doesn't even mention it in the specs excepts mentioning full backwards compatibility. I might still be able to mask it since "Also, in SVGB, clipping paths are restricted to rectangles ('rect' elements or references to 'rect' elements through 'use')"(tiny 1.1 specs) but I'll have to try and make sure...

2nd EDIT: I can't even make the SVG Test Suite example for clipPath to work (http://www.w3.org/Graphics/SVG/Test/20011026/masking-clipPath-BE-01.svg). I'm guessing that when the specs said "SVGT does not support element opacity, fill-opacity, stroke-opacity properties" (http://www.w3.org/TR/SVGMobile/#sec-clipping) - SVGT meaning SVG Tiny - Qt figured it's ok to drop opacity of any kind - masking and clipping included - altogether. Google'ing "qt clip-path" lead me to places like these http://qt-project.org/forums/viewthread/420 (http://qt-project.org/forums/viewthread/420) so I think I'll be avoiding clipping and masking in svgs from now on.