<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Testing valid values for |viewBox| attribute</title> <defs> <rect id="redRect" fill="red" height="20" width="20"/> <rect id="limeRect" fill="lime" height="10" width="10"/> </defs> <rect fill="lime" height="100%" width="100%"/> <!-- SUMMARY: Each <svg> subdocument below has a valid viewBox. If we honor the valid viewBox (ignoring typos), that will make us scale the <use>'d limeRect to appear as big as than the redRect, and we'll have no red showing (and we'll pass the test). --> <!-- First row: no commas at all --> <g transform="translate(0, 0)"> <g transform="translate(0, 0)"> <use xlink:href="#redRect"/> <svg width="20" height="20" viewBox="0 0 10 10"> <use xlink:href="#limeRect"/> </svg> </g> <g transform="translate(40, 0)"> <use xlink:href="#redRect"/> <svg width="20" height="20" viewBox=" 0 0 10 10"> <use xlink:href="#limeRect"/> </svg> </g> <g transform="translate(80, 0)"> <use xlink:href="#redRect"/> <svg width="20" height="20" viewBox="0 0 10 10 "> <use xlink:href="#limeRect"/> </svg> </g> <g transform="translate(120, 0)"> <use xlink:href="#redRect"/> <svg width="20" height="20" viewBox=" 0 0 10 10 "> <use xlink:href="#limeRect"/> </svg> </g> </g> <!-- Second row: some commas --> <g transform="translate(0, 40)"> <g transform="translate(0, 0)"> <use xlink:href="#redRect"/> <svg width="20" height="20" viewBox="0,0 10 10"> <use xlink:href="#limeRect"/> </svg> </g> <g transform="translate(40, 0)"> <use xlink:href="#redRect"/> <svg width="20" height="20" viewBox="0 0,10 10"> <use xlink:href="#limeRect"/> </svg> </g> <g transform="translate(80, 0)"> <use xlink:href="#redRect"/> <svg width="20" height="20" viewBox="0 0 10,10"> <use xlink:href="#limeRect"/> </svg> </g> <g transform="translate(120, 0)"> <use xlink:href="#redRect"/> <svg width="20" height="20" viewBox="0,0,10,10"> <use xlink:href="#limeRect"/> </svg> </g> </g> <!-- Third row: commas & whitespace mixed --> <g transform="translate(0, 80)"> <g transform="translate(0, 0)"> <use xlink:href="#redRect"/> <svg width="20" height="20" viewBox="0, 0 10 10"> <use xlink:href="#limeRect"/> </svg> </g> <g transform="translate(40, 0)"> <use xlink:href="#redRect"/> <svg width="20" height="20" viewBox="0 0 , 10 10"> <use xlink:href="#limeRect"/> </svg> </g> <g transform="translate(80, 0)"> <use xlink:href="#redRect"/> <svg width="20" height="20" viewBox="0 0 10 ,10"> <use xlink:href="#limeRect"/> </svg> </g> <g transform="translate(120, 0)"> <use xlink:href="#redRect"/> <svg width="20" height="20" viewBox=" 0 ,0, 10,10 "> <use xlink:href="#limeRect"/> </svg> </g> </g> </svg>