Jump to content
You must now use your email address to sign in [click for more info] ×

SVG Import - Icon not displaying correct

FroME

By FroME
in V1 Bugs found on Windows

 Share

Recommended Posts

Jowday

Jowday

Posted
Posted

Even Google Chrome and Apples own Safari is struggling with it:

image.png.71dde95a84ef446ca7ec0c2cf8b81df3.png

 

Same logo from Apple forum (bitmap):

securedImage.jsp?productid=131629&size=2

  • "The user interface is supposed to work for me - I am not supposed to work for the user interface."
  • Computer-, operating system- and software agnostic; I am a result oriented professional. Look for a fanboy somewhere else.
  • “When a wise man points at the moon the imbecile examines the finger.” ― Confucius
  • Not an Affinity user og forum user anymore. The software continued to disappoint and not deliver.
Link to comment
Share on other sites
Jowday

Jowday

Posted
Posted

Psst: 

Affinity is not the only program rendering it like that. On this particular machine CorelDRAW, Gravit Designer Pro and Adobe Photoshop CC 2021 renders it exactly like that too.

If I remember it I will check it out on my work laptop in Adobe Illustrator CC 2021 - the program that originally generated this SVG: 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 125 25.5" style="enable-background:new 0 0 125 25.5;" xml:space="preserve">
<style type="text/css">
	.st0{filter:url(#Adobe_OpacityMaskFilter);}
	.st1{fill:#FFFFFF;}
	.st2{mask:url(#mask-2_2_);}
	.st3{filter:url(#Adobe_OpacityMaskFilter_1_);}
	.st4{mask:url(#mask-4_2_);fill:url(#Rectangle-path_6_);}
	.st5{filter:url(#Adobe_OpacityMaskFilter_2_);}
	.st6{mask:url(#mask-12_1_);}
	.st7{filter:url(#Adobe_OpacityMaskFilter_3_);}
	.st8{mask:url(#mask-14_1_);fill:url(#Rectangle-path_7_);}
	.st9{filter:url(#Adobe_OpacityMaskFilter_4_);}
	.st10{mask:url(#mask-17_1_);}
	.st11{filter:url(#Adobe_OpacityMaskFilter_5_);}
	.st12{mask:url(#mask-19_1_);fill:url(#Rectangle-path_8_);}
	.st13{filter:url(#Adobe_OpacityMaskFilter_6_);}
	.st14{mask:url(#mask-22_1_);}
	.st15{filter:url(#Adobe_OpacityMaskFilter_7_);}
	.st16{mask:url(#mask-24_1_);fill:url(#Rectangle-path_9_);}
	.st17{filter:url(#Adobe_OpacityMaskFilter_8_);}
	.st18{mask:url(#mask-27_1_);}
	.st19{filter:url(#Adobe_OpacityMaskFilter_9_);}
	.st20{mask:url(#mask-29_1_);fill:url(#Rectangle-path_10_);}
	.st21{filter:url(#Adobe_OpacityMaskFilter_10_);}
	.st22{mask:url(#mask-32_1_);fill:#FFFFFF;}
	.st23{filter:url(#Adobe_OpacityMaskFilter_11_);}
	.st24{mask:url(#mask-7_1_);}
	.st25{filter:url(#Adobe_OpacityMaskFilter_12_);}
	.st26{mask:url(#mask-9_1_);fill:url(#Rectangle-path_11_);}
</style>
<g id="icons">
	<g>
		<g>
			<g id="Clipped">
				<defs>
					<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="1" y="0.2" width="25.1" height="25.1">
						<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
					</filter>
				</defs>
				<mask maskUnits="userSpaceOnUse" x="1" y="0.2" width="25.1" height="25.1" id="mask-2_2_">
					<g class="st0">
						<rect id="path-1_2_" x="1" y="0.2" class="st1" width="25.1" height="25.1"/>
					</g>
				</mask>
				<g class="st2">
					<defs>
						<filter id="Adobe_OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="1" y="0.2" width="25.1" height="25.1">
							<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
						</filter>
					</defs>
					<mask maskUnits="userSpaceOnUse" x="1" y="0.2" width="25.1" height="25.1" id="mask-4_2_">
						<g class="st3">
							<path id="path-3_2_" class="st1" d="M8.7,0.2c-0.3,0-0.5,0-0.7,0c-0.3,0-0.5,0-0.8,0c-0.6,0-1.1,0-1.7,0.1
								C5,0.4,4.5,0.6,4,0.9C3.5,1.1,3,1.4,2.6,1.8c-0.4,0.4-0.7,0.8-1,1.3c-0.3,0.5-0.4,1-0.5,1.6C1,5.3,1,5.8,1,6.4
								c0,0.3,0,0.5,0,0.8c0,0.2,0,0.5,0,0.7V8v9.4v0.2c0,0.2,0,0.5,0,0.7c0,0.3,0,0.5,0,0.8c0,0.6,0,1.1,0.1,1.7
								c0.1,0.6,0.3,1.1,0.5,1.6c0.3,0.5,0.6,0.9,1,1.3c0.4,0.4,0.8,0.7,1.3,1c0.5,0.3,1,0.4,1.6,0.5c0.5,0.1,1.1,0.1,1.7,0.1
								c0.3,0,0.5,0,0.8,0c0.3,0,0.5,0,0.7,0h0.2h9.4h0.2c0.3,0,0.5,0,0.7,0c0.3,0,0.5,0,0.8,0c0.6,0,1.1,0,1.7-0.1
								c0.6-0.1,1.1-0.3,1.6-0.5c0.5-0.3,0.9-0.6,1.3-1c0.4-0.4,0.7-0.8,1-1.3c0.3-0.5,0.4-1,0.5-1.6c0.1-0.5,0.1-1.1,0.1-1.7
								c0-0.3,0-0.5,0-0.8c0-0.2,0-0.5,0-0.7V7.9c0-0.2,0-0.5,0-0.7c0-0.3,0-0.5,0-0.8c0-0.6,0-1.1-0.1-1.7
								c-0.1-0.6-0.3-1.1-0.5-1.6c-0.3-0.5-0.6-0.9-1-1.3c-0.4-0.4-0.8-0.7-1.3-1c-0.5-0.3-1-0.4-1.6-0.5c-0.5-0.1-1.1-0.1-1.7-0.1
								c-0.3,0-0.5,0-0.8,0c-0.3,0-0.5,0-0.7,0L8.7,0.2L8.7,0.2z"/>
						</g>
					</mask>
					
						<linearGradient id="Rectangle-path_6_" gradientUnits="userSpaceOnUse" x1="-808.9617" y1="502.4956" x2="-808.9617" y2="503.4942" gradientTransform="matrix(25.164 0 0 25.164 20370.252 -12644.6201)">
						<stop  offset="0" style="stop-color:#EF4DB7"/>
						<stop  offset="1" style="stop-color:#C643FD"/>
					</linearGradient>
					<rect id="Rectangle-path" x="1" y="0.2" class="st4" width="25.1" height="25.1"/>
				</g>
			</g>
			<g id="Artboard-Copy-2">
				<g id="US_UK_iTunes_Store_Buy_Lockup_RGB_blk">
					<path id="Shape_3_" d="M31.9,7c0-0.6,0.5-1.1,1.1-1.1C33.6,5.9,34,6.4,34,7C34,7.5,33.6,8,33,8C32.4,8,31.9,7.5,31.9,7z
						 M32,9.3h1.9v9.1H32C32,18.4,32,9.3,32,9.3z M38.8,18.4V7.6H35V6h9.5v1.7h-3.8v10.8L38.8,18.4L38.8,18.4L38.8,18.4z M52.3,18.4
						h-1.8v-1.6h0c-0.5,1.1-1.4,1.7-2.8,1.7c-2,0-3.2-1.3-3.2-3.3V9.3h1.9v5.4c0,1.4,0.7,2.1,1.9,2.1c1.3,0,2.2-0.9,2.2-2.3V9.3h1.9
						L52.3,18.4L52.3,18.4L52.3,18.4z M54.2,9.3h1.8v1.5h0c0.5-1.1,1.5-1.6,2.8-1.6c2,0,3.1,1.3,3.1,3.4v5.8h-1.9V13
						c0-1.4-0.6-2.1-1.9-2.1c-1.3,0-2.1,0.9-2.1,2.3v5.2h-1.9L54.2,9.3L54.2,9.3L54.2,9.3z M71.5,15.7c-0.3,1.6-1.9,2.8-3.9,2.8
						c-2.6,0-4.3-1.8-4.3-4.6c0-2.8,1.6-4.7,4.2-4.7c2.5,0,4.1,1.7,4.1,4.5v0.6h-6.4v0.1c0,1.5,1,2.6,2.4,2.6c1,0,1.8-0.5,2.1-1.3
						H71.5z M65.2,13h4.5c0-1.4-0.9-2.3-2.2-2.3C66.3,10.7,65.3,11.7,65.2,13z M76.4,9.2c2,0,3.4,1.1,3.5,2.7h-1.7
						c-0.1-0.8-0.8-1.3-1.8-1.3c-1,0-1.7,0.5-1.7,1.2c0,0.5,0.4,0.9,1.4,1.1l1.5,0.4c1.8,0.4,2.5,1.1,2.5,2.4c0,1.6-1.5,2.8-3.8,2.8
						c-2.1,0-3.6-1.1-3.7-2.7h1.8c0.1,0.9,0.8,1.3,2,1.3c1.1,0,1.8-0.5,1.8-1.2c0-0.6-0.3-0.9-1.3-1.1l-1.6-0.4
						c-1.6-0.4-2.5-1.2-2.5-2.5C72.9,10.3,74.3,9.2,76.4,9.2z M86.7,14.9c0.1,1.2,1.3,2,3,2c1.6,0,2.7-0.8,2.7-1.9
						c0-1-0.7-1.5-2.3-1.9l-1.6-0.4c-2.3-0.6-3.3-1.6-3.3-3.3c0-2.1,1.9-3.6,4.5-3.6c2.6,0,4.4,1.5,4.5,3.6h-1.9
						c-0.1-1.2-1.1-2-2.6-2c-1.5,0-2.5,0.8-2.5,1.9c0,0.9,0.7,1.4,2.3,1.8l1.4,0.3c2.5,0.6,3.6,1.6,3.6,3.4c0,2.3-1.9,3.8-4.8,3.8
						c-2.8,0-4.6-1.4-4.7-3.7L86.7,14.9L86.7,14.9L86.7,14.9z M98.3,7.2v2.1h1.7v1.5h-1.7v5c0,0.8,0.3,1.1,1.1,1.1
						c0.2,0,0.5,0,0.6,0v1.5c-0.2,0.1-0.6,0.1-1,0.1c-1.8,0-2.5-0.7-2.5-2.4v-5.2h-1.3V9.3h1.3V7.2L98.3,7.2
						C98.3,7.2,98.3,7.2,98.3,7.2z M100.7,13.9c0-2.8,1.7-4.6,4.3-4.6c2.6,0,4.3,1.8,4.3,4.6c0,2.9-1.7,4.6-4.3,4.6
						C102.4,18.5,100.7,16.7,100.7,13.9z M107.4,13.9c0-2-0.9-3.1-2.4-3.1c-1.5,0-2.4,1.2-2.4,3.1c0,2,0.9,3.1,2.4,3.1
						C106.5,17,107.4,15.8,107.4,13.9z M110.8,9.3h1.8v1.5h0c0.3-1,1.1-1.6,2.2-1.6c0.3,0,0.5,0,0.6,0.1v1.7
						c-0.1-0.1-0.5-0.1-0.8-0.1c-1.2,0-1.9,0.8-1.9,2.1v5.4h-1.9L110.8,9.3L110.8,9.3L110.8,9.3z M123.9,15.7
						c-0.3,1.6-1.9,2.8-3.9,2.8c-2.6,0-4.3-1.8-4.3-4.6c0-2.8,1.6-4.7,4.2-4.7c2.5,0,4.1,1.7,4.1,4.5v0.6h-6.4v0.1
						c0,1.5,1,2.6,2.4,2.6c1,0,1.8-0.5,2.1-1.3H123.9z M117.6,13h4.5c0-1.4-0.9-2.3-2.2-2.3C118.7,10.7,117.7,11.7,117.6,13z"/>
					<g id="Group_2_">
						<g id="Clipped_2_">
							<defs>
								<filter id="Adobe_OpacityMaskFilter_2_" filterUnits="userSpaceOnUse" x="13.5" y="14.4" width="5.9" height="6.7">
									<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
								</filter>
							</defs>
							<mask maskUnits="userSpaceOnUse" x="13.5" y="14.4" width="5.9" height="6.7" id="mask-12_1_">
								<g class="st5">
									<rect id="path-11_1_" x="1" y="0.2" class="st1" width="25.1" height="25.1"/>
								</g>
							</mask>
							<g class="st6">
								<g transform="translate(12.000000, 14.000000)">
									<defs>
										<filter id="Adobe_OpacityMaskFilter_3_" filterUnits="userSpaceOnUse" x="1.5" y="0.4" width="5.9" height="6.7">
											<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
										</filter>
									</defs>
									<mask maskUnits="userSpaceOnUse" x="1.5" y="0.4" width="5.9" height="6.7" id="mask-14_1_">
										<g class="st7">
											<path id="path-13_1_" class="st1" d="M1.5,3.2l4.4,3.2c0.2,0.2,0.5,0.3,0.7,0.5C6.7,6.9,6.8,7,6.9,7c0,0,0,0,0,0
												c0.1,0,0.1,0,0.2,0C7.2,7,7.2,7,7.3,7c0,0,0.1-0.1,0.1-0.1c0-0.1,0-0.1,0-0.2c0,0,0,0,0,0c0-0.1,0-0.2,0-0.3
												C7.3,6.1,7.2,5.8,7.1,5.5L5.4,0.4L1.5,3.2z"/>
										</g>
									</mask>
									
										<radialGradient id="Rectangle-path_7_" cx="-725.5587" cy="658.6119" r="4.429703e-03" gradientTransform="matrix(5.882 0 0 5.882 4257.271 -3870.7549)" gradientUnits="userSpaceOnUse">
										<stop  offset="0" style="stop-color:#F9E3FB"/>
										<stop  offset="0.7459" style="stop-color:#F9E3FB"/>
										<stop  offset="0.8097" style="stop-color:#F8DEFB"/>
										<stop  offset="0.8826" style="stop-color:#F3D0FA"/>
										<stop  offset="0.9599" style="stop-color:#ECBAF9"/>
										<stop  offset="0.981" style="stop-color:#EAB2F9"/>
										<stop  offset="1" style="stop-color:#EAB2F9"/>
									</radialGradient>
									<rect id="Rectangle-path_2_" x="1.5" y="0.4" class="st8" width="5.9" height="6.7"/>
								</g>
							</g>
						</g>
						<g id="Clipped_3_">
							<defs>
								<filter id="Adobe_OpacityMaskFilter_4_" filterUnits="userSpaceOnUse" x="4.2" y="9.8" width="6.9" height="4.6">
									<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
								</filter>
							</defs>
							<mask maskUnits="userSpaceOnUse" x="4.2" y="9.8" width="6.9" height="4.6" id="mask-17_1_">
								<g class="st9">
									<rect id="path-16_1_" x="1" y="0.2" class="st1" width="25.1" height="25.1"/>
								</g>
							</mask>
							<g class="st10">
								<g transform="translate(3.000000, 9.000000)">
									<defs>
										<filter id="Adobe_OpacityMaskFilter_5_" filterUnits="userSpaceOnUse" x="1.2" y="0.8" width="6.9" height="4.6">
											<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
										</filter>
									</defs>
									<mask maskUnits="userSpaceOnUse" x="1.2" y="0.8" width="6.9" height="4.6" id="mask-19_1_">
										<g class="st11">
											<path id="path-18_1_" class="st1" d="M2.7,0.8c-0.3,0-0.6,0-0.9,0c-0.1,0-0.2,0-0.3,0.1c0,0,0,0,0,0
												c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1,0,0.2c0,0.1,0,0.1,0.1,0.2c0,0,0,0,0,0c0.1,0.1,0.1,0.1,0.2,0.2
												C1.8,1.8,2,2,2.2,2.2l4.4,3.2l1.5-4.6H2.7z"/>
										</g>
									</mask>
									
										<radialGradient id="Rectangle-path_8_" cx="-667.2225" cy="712.7831" r="5.709395e-03" gradientTransform="matrix(4.599 0 0 4.599 3057.7996 -3286.936)" gradientUnits="userSpaceOnUse">
										<stop  offset="0" style="stop-color:#FAE1F8"/>
										<stop  offset="0.6" style="stop-color:#FAE1F8"/>
										<stop  offset="0.85" style="stop-color:#F7D6F7"/>
										<stop  offset="1" style="stop-color:#F7D6F7"/>
									</radialGradient>
									<rect id="Rectangle-path_3_" x="1.2" y="0.8" class="st12" width="6.9" height="4.6"/>
								</g>
							</g>
						</g>
						<g id="Clipped_4_">
							<defs>
								<filter id="Adobe_OpacityMaskFilter_6_" filterUnits="userSpaceOnUse" x="7.7" y="14.4" width="5.9" height="6.7">
									<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
								</filter>
							</defs>
							<mask maskUnits="userSpaceOnUse" x="7.7" y="14.4" width="5.9" height="6.7" id="mask-22_1_">
								<g class="st13">
									<rect id="path-21_1_" x="1" y="0.2" class="st1" width="25.1" height="25.1"/>
								</g>
							</mask>
							<g class="st14">
								<g transform="translate(6.000000, 14.000000)">
									<defs>
										<filter id="Adobe_OpacityMaskFilter_7_" filterUnits="userSpaceOnUse" x="1.7" y="0.4" width="5.9" height="6.7">
											<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
										</filter>
									</defs>
									<mask maskUnits="userSpaceOnUse" x="1.7" y="0.4" width="5.9" height="6.7" id="mask-24_1_">
										<g class="st15">
											<path id="path-23_1_" class="st1" d="M1.9,5.5C1.9,5.8,1.8,6.1,1.7,6.4c0,0.1,0,0.2,0,0.3c0,0,0,0,0,0c0,0.1,0,0.1,0,0.2
												C1.7,6.9,1.8,7,1.8,7c0,0,0.1,0,0.1,0.1c0.1,0,0.1,0,0.2,0c0,0,0,0,0,0c0.1,0,0.2-0.1,0.3-0.1c0.2-0.2,0.5-0.3,0.7-0.5
												l4.4-3.2L5.1,1.4l-1.4-1L1.9,5.5z"/>
										</g>
									</mask>
									
										<radialGradient id="Rectangle-path_9_" cx="-709.2784" cy="660.0571" r="4.429703e-03" gradientTransform="matrix(5.882 0 0 5.882 4186.8052 -3869.5693)" gradientUnits="userSpaceOnUse">
										<stop  offset="0" style="stop-color:#FAE9FC"/>
										<stop  offset="0.669" style="stop-color:#FAE9FC"/>
										<stop  offset="0.8118" style="stop-color:#F8DEFA"/>
										<stop  offset="0.91" style="stop-color:#F6D4F8"/>
										<stop  offset="1" style="stop-color:#F6D4F8"/>
									</radialGradient>
									<rect id="Rectangle-path_4_" x="1.7" y="0.4" class="st16" width="5.9" height="6.7"/>
								</g>
							</g>
						</g>
						<g id="Clipped_5_">
							<defs>
								<filter id="Adobe_OpacityMaskFilter_8_" filterUnits="userSpaceOnUse" x="15.9" y="9.8" width="6.9" height="4.6">
									<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
								</filter>
							</defs>
							<mask maskUnits="userSpaceOnUse" x="15.9" y="9.8" width="6.9" height="4.6" id="mask-27_1_">
								<g class="st17">
									<rect id="path-26_1_" x="1" y="0.2" class="st1" width="25.1" height="25.1"/>
								</g>
							</mask>
							<g class="st18">
								<g transform="translate(14.000000, 9.000000)">
									<defs>
										<filter id="Adobe_OpacityMaskFilter_9_" filterUnits="userSpaceOnUse" x="1.9" y="0.8" width="6.9" height="4.6">
											<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
										</filter>
									</defs>
									<mask maskUnits="userSpaceOnUse" x="1.9" y="0.8" width="6.9" height="4.6" id="mask-29_1_">
										<g class="st19">
											<path id="path-28_1_" class="st1" d="M1.9,0.8l1.5,4.6l4.4-3.2C8.1,2,8.3,1.8,8.5,1.6c0.1-0.1,0.1-0.1,0.2-0.2
												c0,0,0,0,0,0c0-0.1,0.1-0.1,0.1-0.2c0-0.1,0-0.1,0-0.2c0,0,0-0.1-0.1-0.1c0,0-0.1-0.1-0.2-0.1c0,0,0,0,0,0
												c-0.1,0-0.2,0-0.3,0c-0.3,0-0.6,0-0.9,0H1.9z"/>
										</g>
									</mask>
									
										<radialGradient id="Rectangle-path_10_" cx="-686.7855" cy="718.5959" r="5.709395e-03" gradientTransform="matrix(4.599 0 0 4.599 3165.3547 -3286.937)" gradientUnits="userSpaceOnUse">
										<stop  offset="0" style="stop-color:#FAE9FB"/>
										<stop  offset="0.68" style="stop-color:#FAE9FB"/>
										<stop  offset="0.8132" style="stop-color:#F8DEF8"/>
										<stop  offset="0.98" style="stop-color:#F5CAF2"/>
										<stop  offset="1" style="stop-color:#F5CAF2"/>
									</radialGradient>
									<rect id="Rectangle-path_5_" x="1.9" y="0.8" class="st20" width="6.9" height="4.6"/>
								</g>
							</g>
						</g>
						<g id="Clipped_6_">
							<defs>
								<filter id="Adobe_OpacityMaskFilter_10_" filterUnits="userSpaceOnUse" x="9.6" y="9.8" width="7.8" height="7.4">
									<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
								</filter>
							</defs>
							<mask maskUnits="userSpaceOnUse" x="9.6" y="9.8" width="7.8" height="7.4" id="mask-32_1_">
								<g class="st21">
									<rect id="path-31_1_" x="1" y="0.2" class="st1" width="25.1" height="25.1"/>
								</g>
							</mask>
							<polygon id="Shape_2_" class="st22" points="11.1,9.8 9.6,14.4 11.1,15.4 13.5,17.2 17.4,14.4 15.9,9.8 							"/>
						</g>
					</g>
				</g>
			</g>
		</g>
		<g id="Clipped_1_">
			<defs>
				<filter id="Adobe_OpacityMaskFilter_11_" filterUnits="userSpaceOnUse" x="11.1" y="3.3" width="4.8" height="6.4">
					<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
				</filter>
			</defs>
			<mask maskUnits="userSpaceOnUse" x="11.1" y="3.3" width="4.8" height="6.4" id="mask-7_1_">
				<g class="st23">
					<rect id="path-6_1_" x="1" y="0.2" class="st1" width="25.1" height="25.1"/>
				</g>
			</mask>
			<g class="st24">
				<g transform="translate(10.000000, 3.000000)">
					<defs>
						<filter id="Adobe_OpacityMaskFilter_12_" filterUnits="userSpaceOnUse" x="1.1" y="0.3" width="4.8" height="6.4">
							<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
						</filter>
					</defs>
					<mask maskUnits="userSpaceOnUse" x="1.1" y="0.3" width="4.8" height="6.4" id="mask-9_1_">
						<g class="st25">
							<path id="path-8_1_" class="st1" d="M3.4,0.4c-0.1,0-0.1,0.1-0.1,0.1c0,0,0,0,0,0C3.2,0.6,3.1,0.7,3.1,0.8
								C3,1.1,2.9,1.3,2.8,1.6L1.1,6.8H6L4.3,1.6C4.2,1.3,4.1,1.1,4,0.8c0-0.1-0.1-0.2-0.1-0.3c0,0,0,0,0,0c0-0.1-0.1-0.1-0.1-0.1
								c0,0-0.1,0-0.2,0S3.4,0.3,3.4,0.4"/>
						</g>
					</mask>
					
						<radialGradient id="Rectangle-path_11_" cx="-690.4658" cy="704.2888" r="5.414081e-03" gradientTransform="matrix(4.836 0 0 4.836 3330.627 -3391.7415)" gradientUnits="userSpaceOnUse">
						<stop  offset="0" style="stop-color:#FBE3F8"/>
						<stop  offset="0.745" style="stop-color:#FBE3F8"/>
						<stop  offset="0.8082" style="stop-color:#FADEF6"/>
						<stop  offset="0.8798" style="stop-color:#F9D1F0"/>
						<stop  offset="0.9554" style="stop-color:#F6BAE7"/>
						<stop  offset="0.98" style="stop-color:#F5B1E3"/>
						<stop  offset="1" style="stop-color:#F5B1E3"/>
					</radialGradient>
					<rect id="Rectangle-path_1_" x="1.1" y="0.3" class="st26" width="4.8" height="6.4"/>
				</g>
			</g>
		</g>
	</g>
</g>
</svg>

 

  • "The user interface is supposed to work for me - I am not supposed to work for the user interface."
  • Computer-, operating system- and software agnostic; I am a result oriented professional. Look for a fanboy somewhere else.
  • “When a wise man points at the moon the imbecile examines the finger.” ― Confucius
  • Not an Affinity user og forum user anymore. The software continued to disappoint and not deliver.
Link to comment
Share on other sites
patrick_h_lauke

patrick_h_lauke

Posted
Posted

I believe the issue is related to SVG masks, and Affinity Designer not coping well with them. Came to the forum to essentially post something similar: I have a set of SVGs that use a basic mask, but Designer fails to render them properly - it essentially ignores/omits the <mask> element / doesn't apply the mask to the group. See the comparison screenshot attached. 

<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="200" height="200" fill="black"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="33" y="41" width="116" height="126">
  ...
</mask>
<g mask="url(#mask0)">
  ...
</g>
  ...
</svg>

 

chrome-designer-comparison.png

Avatar-dark.svg

Link to comment
Share on other sites
patrick_h_lauke

patrick_h_lauke

Posted
Posted
18 hours ago, Sean P said:

I believe it is being caused by the use of inline CSS styles in the SVG

feels more like it's due to lack of / proper support for the <mask> (whether it's then applied via CSS, or as an actual attribute/element) - at least based on what I see with my example, which doesn't use CSS for that. anyway, good to know it's a known issue and will hopefully be fixed. of note that the <svg> I was having trouble with above was originally exported out of Designer, it seems, so it didn't survive the roundtrip from Designer > SVG > Designer

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

 Accept Cookies  Reject Cookies