Here is the SVG - What I'm trying to do is to put this svg during load time in VueJs.But the issue is that it runs only for the first try, any help is appreciated. I previously thought that I can may be reload the specific component every time but that also doesn't seem to work.
<svg width="100%" height="100%" viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g>
<g transform="matrix(0.923077,0,0,1.03448,6.15385,-13.7931)">
<rect x="210" y="110" width="650" height="870" style="fill:rgb(223,222,220);stroke:black;stroke-width:1.48px;" />
</g>
<path d="M300,240L510,240" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M540,320L720,320" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M360,380L560,380" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M300,500L600,500" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M405,600L580,600" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M500,700L700,700" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M600,200L700,200" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M300,800L500,800" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
<path d="M400,900L700,900" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
</g>
<g transform="matrix(1,0,0,1,900,-5.68434e-14)">
<g transform="matrix(0.923077,0,0,1.03448,6.15385,-13.7931)">
<rect x="210" y="110" width="650" height="870" style="fill:rgb(223,222,220);stroke:black;stroke-width:1.48px;" />
</g>
<path d="M300,240L510,240" style="fill:none;stroke:rgb(255,100,0);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="1.5s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="1.5s" dur="1s" fill="freeze" />
</path>
<path d="M540,320L720,320" style="fill:none;stroke:rgb(206,59,59);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="0s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="0s" dur="1s" fill="freeze" />
</path>
<path d="M360,380L560,380" style="fill:none;stroke:rgb(0,255,95);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="2.5s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="2.5s" dur="1s" fill="freeze" />
</path>
<path d="M300,500L600,500" style="fill:none;stroke:rgb(255,183,0);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="2s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="2s" dur="1s" fill="freeze" />
</path>
<path d="M405,600L580,600" style="fill:none;stroke:rgb(189,255,0);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="4s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="4s" dur="1s" fill="freeze" />
</path>
<path d="M500,700L700,700" style="fill:none;stroke:rgb(255,6,0);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="3.5s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="3.5s" dur="1s" fill="freeze" />
</path>
<path d="M600,200L700,200" style="fill:none;stroke:rgb(47,0,255);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="0.5s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="0.5s" dur="1s" fill="freeze" />
</path>
<path d="M300,800L500,800" style="fill:none;stroke:rgb(0,205,255);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="4.5s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="4.5s" dur="1s" fill="freeze" />
</path>
<path d="M400,900L700,900" style="fill:none;stroke:rgb(161,133,77);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="5.5s" dur="1s" fill="freeze" />
<animate attributeName="stroke-width" from="0px" to="15px" begin="5.5s" dur="1s" fill="freeze" />
</path>
</g>
<g transform="matrix(0.5,0,0,1,95,0)">
<path d="M250,67.5C250,63.361 243.279,60 235,60L205,60C196.721,60 190,63.361 190,67.5L190,1042.5C190,1046.64 196.721,1050 205,1050L235,1050C243.279,1050 250,1046.64 250,1042.5L250,67.5Z" style="fill:rgb(79,227,43);stroke:black;stroke-width:1.26px;" />
<animateMotion path="M0,0L600,0L0,0" begin="0s" dur="5s" repeatCount="indefinite" />
</g>
<g transform="matrix(1,0,0,1,0,-60)">
<path d="M820,613.75L820,596.25L1055,596.25L1055,580L1080,605L1055,630L1055,613.75L820,613.75Z" style="fill:rgb(64,67,211);stroke:rgb(30,82,211);stroke-width:1px;" />
</g>
</svg>
Here is how to solve this problem:
In order to have the animation running continuously rather than only once, set the following inside animateMotion:
repeatCount="indefinite"
You want the animation to go forth and back:
At t0 (animation cycle start), the element should be at the initial position
At mid-time of the animation, the element should be at the final position
At t1 (animation cycle end), the element should be back to the initial position.
This can be controlled with keyPoints and keyTimes.
Again inside animateMotion, the following corresponds to the animation cycle as described above.
keyPoints="0;1;0" keyTimes="0;.5;1"
The snippet below shows the solution in action in one of the animated rectangles from the sample code shared in the question.
Please note that the animation durations must be doubled in order to keep the same movement speed as in the question, since now the movement length is twice larger (forth and back) instead of one way).
Read also: this answer.
<svg width="100%" height="100%" viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(1,0,0,1,900,-5.68434e-14)">
<path d="M300,240L510,240" style="fill:none;stroke:rgb(255,100,0);stroke-width:0px;">
<animateMotion path="M-900,0L0,0" begin="0.5s" dur="2s" fill="freeze" keyPoints="0;1;0" keyTimes="0;.5;1" repeatCount="indefinite"/>
<animate attributeName="stroke-width" from="0px" to="15px" begin="0.5s" dur="1s" fill="freeze" />
</path>
</g>
</svg>
I have several SVG-segments in a table stored as xml-document.
Now I need to select all elements from that table, and merge them into one XML-document.
This is the T-SQL code I have:
declare #xml table (xmldocument xml)
insert #xml select '
<svg xmlns="http://www.w3.org/2000/svg" otherattrib="x">
<path id="789" data-objid="0000X2"></path>
</svg>'
insert #xml select '
<svg xmlns="http://www.w3.org/2000/svg" otherattrib="x">
<admin>
<g>
<path></path>
<path data-objid="0000X1"></path>
<path id="123" data-objid="0000X2"></path>
<path id="456" data-objid="0000X3"></path>
</g>
</admin>
<g>
<path></path>
<path data-objid="0000X1"></path>
<path id="789" data-objid="0000X2"></path>
<path id="abc" data-objid="0000X3"></path>
</g>
</svg>'
insert #xml select '
<svg xmlns="http://www.w3.org/2000/svg" otherattrib="x">
<path></path>
</svg>'
insert #xml select '
<svg xmlns="http://www.w3.org/2000/svg" otherattrib="x">
<path id="abc" data-objid="0000X3"></path>
</svg>'
--;WITH XMLNAMESPACES ('http://www.w3.org/2000/svg' AS svg)
;WITH XMLNAMESPACES (default 'http://www.w3.org/2000/svg')
--SELECT
--(
SELECT
--xmldocument
--,c.p.value('.', 'nvarchar(MAX)')
c.p.query('declare default element namespace "http://www.w3.org/2000/svg";.')
FROM #xml AS t
OUTER APPLY t.xmldocument.nodes('/svg//*') AS c(p)
FOR XML PATH(''), root('svg')
-- ) AS merged
But this produces
<svg xmlns="http://www.w3.org/2000/svg">
<path xmlns="http://www.w3.org/2000/svg" id="789" data-objid="0000X2" />
<admin xmlns="http://www.w3.org/2000/svg">
<g>
<path />
<path data-objid="0000X1" />
<path id="123" data-objid="0000X2" />
<path id="456" data-objid="0000X3" />
</g>
</admin>
<g xmlns="http://www.w3.org/2000/svg">
<path />
<path data-objid="0000X1" />
<path id="123" data-objid="0000X2" />
<path id="456" data-objid="0000X3" />
</g>
<path xmlns="http://www.w3.org/2000/svg" />
<path xmlns="http://www.w3.org/2000/svg" data-objid="0000X1" />
<path xmlns="http://www.w3.org/2000/svg" id="123" data-objid="0000X2" />
<path xmlns="http://www.w3.org/2000/svg" id="456" data-objid="0000X3" />
<g xmlns="http://www.w3.org/2000/svg">
<path />
<path data-objid="0000X1" />
<path id="789" data-objid="0000X2" />
<path id="abc" data-objid="0000X3" />
</g>
<path xmlns="http://www.w3.org/2000/svg" />
<path xmlns="http://www.w3.org/2000/svg" data-objid="0000X1" />
<path xmlns="http://www.w3.org/2000/svg" id="789" data-objid="0000X2" />
<path xmlns="http://www.w3.org/2000/svg" id="abc" data-objid="0000X3" />
<path xmlns="http://www.w3.org/2000/svg" />
<path xmlns="http://www.w3.org/2000/svg" id="abc" data-objid="0000X3" />
</svg>
instead of
<svg xmlns="http://www.w3.org/2000/svg">
<path id="789" data-objid="0000X2" />
<admin>
<g>
<path />
<path data-objid="0000X1" />
<path id="123" data-objid="0000X2" />
<path id="456" data-objid="0000X3" />
</g>
</admin>
<g>
<path />
<path data-objid="0000X1" />
<path id="123" data-objid="0000X2" />
<path id="456" data-objid="0000X3" />
</g>
<path />
<path data-objid="0000X1" />
<path id="123" data-objid="0000X2" />
<path id="456" data-objid="0000X3" />
<g>
<path />
<path data-objid="0000X1" />
<path id="789" data-objid="0000X2" />
<path id="abc" data-objid="0000X3" />
</g>
<path />
<path data-objid="0000X1" />
<path id="789" data-objid="0000X2" />
<path id="abc" data-objid="0000X3" />
<path />
<path id="abc" data-objid="0000X3" />
</svg>
What am I missing ? What do I do wrong ?
How to correct this without having to cast to varchar and then do a search-and-replace on "xmlns=..." ?
First of all: The repeated namespaces are not wrong in any way, just annoying and bloating the size of your result...
Unfortunately there is no way to get rid of them in a clean way. Your idea of casting to text and do this on string level is not that bad, if you really need this (but be aware, that casting must go to NVARCHAR and the re-cast to XML can change your XML stucturally (attribute order, CDATA-sections...). Try this:
Short approach
...if you really do not need anything else, than the namespace in the first root <svg>...
DECLARE #NewXML NVARCHAR(MAX)=
(
SELECT t.xmldocument.query('declare default element namespace "http://www.w3.org/2000/svg";svg/*')
FROM #xml AS t
FOR XML PATH('')
);
SELECT CAST(N'<svg xmlns="http://www.w3.org/2000/svg">'
+ REPLACE(#NewXML,' xmlns="http://www.w3.org/2000/svg"','')
+ N'</svg>' AS XML);
More flexible approach
You might try this:
DECLARE #NewXML XML=
(
SELECT t.xmldocument.query('declare default element namespace "http://www.w3.org/2000/svg";svg/*')
FROM #xml AS t
FOR XML PATH(''),TYPE
);
SET #NewXML =CAST(REPLACE(CAST(#NewXML AS NVARCHAR(MAX)),' xmlns="http://www.w3.org/2000/svg"','') AS XML);
--You need to repeat the CAST and REPLACE, otherwise you'd get a lot of xmlns="" defining an empty default namespace for the inner nodes, which was wrong...
WITH XMLNAMESPACES (DEFAULT 'http://www.w3.org/2000/svg')
SELECT #NewXML=CAST(REPLACE(CAST((SELECT #NewXML FOR XML PATH('svg'),TYPE) AS NVARCHAR(MAX)),' xmlns=""','') AS XML);
SELECT #NewXML;
You might use STUFF() to introduce the namespace on string level:
(Don't use WITH XMLNAMESPACES here...
SELECT #NewXML=CAST(STUFF(CAST((SELECT #NewXML FOR XML PATH('svg'),TYPE) AS NVARCHAR(MAX)),5,0,' xmlns="http://www.w3.org/2000/svg" ') AS XML);
SELECT #NewXML;
The result in all cases
<svg xmlns="http://www.w3.org/2000/svg">
<path id="789" data-objid="0000X2" />
<admin>
<g>
<path />
<path data-objid="0000X1" />
<path id="123" data-objid="0000X2" />
<path id="456" data-objid="0000X3" />
</g>
</admin>
<g>
<path />
<path data-objid="0000X1" />
<path id="789" data-objid="0000X2" />
<path id="abc" data-objid="0000X3" />
</g>
<path />
<path id="abc" data-objid="0000X3" />
</svg>
I am working on a website where you create svg artwork, which means you can dynamically add elements, scale, color and move them around.
Thing is, when you starting putting shadows on them, everything will start to slow down. For a live demo of this, this is the website I am working on.
I made a codepen which shows exactly the problem, try scrolling down the window in this codepen.
body {
margin: 0;
}
<!-- this SVG is created using the free tool over at www.material101.com -->
<svg height="1080" width="1920">
<defs>
<filter filterUnits="userSpaceOnUse" id="shadow-1">
<feFlood flood-opacity="0.12" flood-color="rgb(0,0,0)" result="flood" id="feFlood4286" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4288" />
<feGaussianBlur in="composite" stdDeviation="1.5" result="blur" id="feGaussianBlur4290" />
<feOffset dx="0" dy="1" result="offset" id="feOffset4292" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4294" />
<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4332" />
<feFlood id="feFlood4334" flood-opacity="0.24" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
<feComposite id="feComposite4336" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur4338" in="composite" stdDeviation="1" result="blur" />
<feOffset id="feOffset4340" dx="0" dy="1" result="offset" />
<feComposite id="feComposite4342" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
</filter>
<filter filterUnits="userSpaceOnUse" id="shadow-2">
<feFlood flood-opacity="0.16" flood-color="rgb(0,0,0)" result="flood" id="feFlood4348" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4350" />
<feGaussianBlur in="composite" stdDeviation="3" result="blur" id="feGaussianBlur4352" />
<feOffset dx="0" dy="3" result="offset" id="feOffset4354" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4356" />
<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4358" />
<feFlood id="feFlood4360" flood-opacity="0.23" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
<feComposite id="feComposite4362" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur4364" in="composite" stdDeviation="3" result="blur" />
<feOffset id="feOffset4366" dx="0" dy="3" result="offset" />
<feComposite id="feComposite4368" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
</filter>
<filter filterUnits="userSpaceOnUse" id="shadow-3">
<feFlood flood-opacity="0.19" flood-color="rgb(0,0,0)" result="flood" id="feFlood4377" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4379" />
<feGaussianBlur in="composite" stdDeviation="10" result="blur" id="feGaussianBlur4381" />
<feOffset dx="0" dy="10" result="offset" id="feOffset4383" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4385" />
<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4387" />
<feFlood id="feFlood4389" flood-opacity="0.23" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
<feComposite id="feComposite4391" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur4393" in="composite" stdDeviation="3" result="blur" />
<feOffset id="feOffset4395" dx="0" dy="6" result="offset" />
<feComposite id="feComposite4397" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
</filter>
<filter filterUnits="userSpaceOnUse" id="shadow-4">
<feFlood flood-opacity="0.25" flood-color="rgb(0,0,0)" result="flood" id="feFlood4421" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4423" />
<feGaussianBlur in="composite" stdDeviation="14" result="blur" id="feGaussianBlur4425" />
<feOffset dx="0" dy="14" result="offset" id="feOffset4427" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4429" />
<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4431" />
<feFlood id="feFlood4433" flood-opacity="0.22" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
<feComposite id="feComposite4435" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur4437" in="composite" stdDeviation="5" result="blur" />
<feOffset id="feOffset4439" dx="0" dy="10" result="offset" />
<feComposite id="feComposite4441" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
</filter>
<filter filterUnits="userSpaceOnUse" id="shadow-5">
<feFlood flood-opacity="0.3" flood-color="rgb(0,0,0)" result="flood" id="feFlood4451" />
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4453" />
<feGaussianBlur in="composite" stdDeviation="19" result="blur" id="feGaussianBlur4455" />
<feOffset dx="0" dy="19" result="offset" id="feOffset4457" />
<feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4459" />
<feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4461" />
<feFlood id="feFlood4463" flood-opacity="0.22" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
<feComposite id="feComposite4465" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur4467" in="composite" stdDeviation="6" result="blur" />
<feOffset id="feOffset4469" dx="0" dy="15" result="offset" />
<feComposite id="feComposite4471" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
</filter>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="#e57373" />
<rect x="0" y="0" width="200" height="200" fill="#c62828" transform="matrix(9,0,0,8,-675,-436)" filter="url('#shadow-3')" style="cursor: pointer;" />
<circle cx="50" cy="50" r="50" fill="#ef5350" x="0" y="0" transform="matrix(0,0,5.0354,4.8626,-172.7689,-111.1304)" filter="url('#shadow-5')" style="cursor: pointer;" />
<rect x="0" y="0" width="200" height="200" fill="#e53935" transform="matrix(-0.309,-0.9511,0.9511,-0.309,892.796,543.0074)" style="cursor: pointer;" />
<rect x="0" y="0" width="200" height="200" fill="#e53935" transform="matrix(-0.0698,-1.9988,1.9988,-0.0698,307.1017,1179.8581)" style="cursor: pointer;" />
<circle cx="50" cy="50" r="50" fill="#e53935" x="0" y="0" transform="matrix(7.1281,-3.6319,1.816,3.564,519.7993,260.3949)" filter="url('#shadow-4')" style="cursor: pointer;" />
<polygon points="0,0,50,100,100,0" fill="#e53935" x="0" y="0" transform="matrix(1.8794,-0.684,3.0782,8.4572,26.1217,-24.6597)" filter="url('#shadow-5')" style="cursor: pointer;" />
<polygon points="0,0,50,100,100,0" fill="#b71c1c" x="0" y="0" transform="matrix(6.6574,-2.1631,0.618,1.9021,-27.7715,158.0503)" style="cursor: pointer;" filter="url('#shadow-2')" />
<circle cx="50" cy="50" r="50" fill="#e53935" x="0" y="0" transform="matrix(0,0,8.9658,0.7844,103.7124,131.7799)" filter="url('#shadow-1')" style="cursor: pointer;" />
<circle cx="50" cy="50" r="50" fill="#e53935" x="0" y="0" transform="matrix(-2.8191,1.0261,-1.7101,-4.6985,369.4589,394.6201)" filter="url('#shadow-4')" style="cursor: pointer;" />
<circle cx="50" cy="50" r="50" fill="#ef5350" x="0" y="0" transform="matrix(1.8264,-0.1598,0.1648,1.8842,381.5187,128.4891)" filter="url('#shadow-3')" style="cursor: pointer;" />
</svg>
Now, I tried seeing what the problem is, but my knowledge is limited. I am sure it is the shadows that are causing this, because it only freezes when shadows are present.
It is also important to know that I let the user choose from 5 different shadows, based on google material, and the higher the level of shadow, the more it freezes. I am also using Snap SVG, but I don't think this has anything to do with it.
Any ideas are greatly appreciated guys.
First problem:
You are specifying that filterUnits=userSpaceOnUse, but then you're not specifying the dimensions that the filter should use. This results in undefined behavior. On Chrome, it seems as if it's setting the filter region as the entire viewBox for every filter - which is resulting in crazy slow performance. Remove the filterUnits declaration and set your filter region to x/y=-50% and height/width ="200%" and you'll get much better performance. i.e.
<filter id="shadow-n" x="-50%" y="-50%" width="200%" height="200%">
With this, you're still a bit slow, but at least you can scroll the page!
Second problem:
You're doing a lot of compositing and blur operations and compositing is slow (at least in Chrome - they're pretty fast in Edge). Instead of doing multiple separate blurs and compositing them, you should be doing a single blur and then shaping the opacity with a feComponentTransfer/feFuncA. You can get a sense for how to do this from a filter generator I built for dropshadows which you can see here:
http://codepen.io/mullany/pen/sJopz
Adjust the spread and size slider and see how the generated code changes.
All that said, complicated SVG Filters can be slow, period. My hope has been that the Chrome team GPU-accelerates them, but unfortunately, they seem to only be paying attention to accelerating things that are used by CSS filter effects.
I've been following the "Build your second iOS app" tutorial step for step and I have run into this error after the tutorial promised that all the errors would go away, but the error didn't show up until after the other errors were all corrected and I tried to compile it.
The error:
The document "MainStoryboard_iPhone.storyboard" could not be opened. Failed to unarchive element named "UITableViewController".
Here is a link to the tutorial.
Here is my storyboard in XML format
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="1.1" toolsVersion="2182" systemVersion="11D50" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" initialViewController="3">
<dependencies>
<deployment defaultVersion="1296" identifier="iOS"/>
<development defaultVersion="4200" identifier="xcode"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="1179"/>
</dependencies>
<scenes>
<!--Navigation Controller-->
<scene sceneID="11">
<objects>
<placeholder placeholderIdentifier="IBFirstResponder" id="10" sceneMemberID="firstResponder"/>
<navigationController id="3" sceneMemberID="viewController">
<navigationBar key="navigationBar" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" id="4">
<autoresizingMask key="autoresizingMask"/>
</navigationBar>
<connections>
<segue destination="12" kind="relationship" relationship="rootViewController" id="19"/>
</connections>
</navigationController>
</objects>
<point key="canvasLocation" x="-1" y="64"/>
</scene>
<!--Hello World Master View Controller - Master-->
<scene sceneID="18">
<objects>
<placeholder placeholderIdentifier="IBFirstResponder" id="17" sceneMemberID="firstResponder"/>
<tableViewController storyboardIdentifier="" title="Master" id="12" customClass="HelloWorldMasterViewController" sceneMemberID="viewController">
<tableView key="view" opaque="NO" clipsSubviews="YES" clearsContextBeforeDrawing="NO" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="prototypes" style="plain" rowHeight="44" sectionHeaderHeight="22" sectionFooterHeight="22" id="13">
<rect key="frame" x="0.0" y="64" width="320" height="416"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<prototypes>
<tableViewCell contentMode="scaleToFill" selectionStyle="blue" accessoryType="disclosureIndicator" hidesAccessoryWhenEditing="NO" indentationLevel="1" indentationWidth="0.0" reuseIdentifier="BirdSightingCell" textLabel="phq-AM-6qj" detailTextLabel="d2j-B0-0IP" style="IBUITableViewCellStyleSubtitle" id="lJ0-d7-vTF">
<rect key="frame" x="0.0" y="22" width="320" height="44"/>
<autoresizingMask key="autoresizingMask"/>
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
<rect key="frame" x="0.0" y="0.0" width="300" height="43"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="left" text="Bird Sightings" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="phq-AM-6qj">
<rect key="frame" x="10" y="2" width="123" height="22"/>
<autoresizingMask key="autoresizingMask"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="18"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<color key="highlightedColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
</label>
<label opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="left" text="Subtitle" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="d2j-B0-0IP">
<rect key="frame" x="10" y="24" width="47" height="18"/>
<autoresizingMask key="autoresizingMask"/>
<fontDescription key="fontDescription" type="system" pointSize="14"/>
<color key="textColor" red="0.50196078431372548" green="0.50196078431372548" blue="0.50196078431372548" alpha="1" colorSpace="calibratedRGB"/>
<color key="highlightedColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
</label>
</subviews>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
</view>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<connections>
<segue destination="21" kind="push" identifier="ShowSightingDetails" id="w1o-hR-DXB"/>
</connections>
</tableViewCell>
</prototypes>
<sections/>
<connections>
<outlet property="dataSource" destination="12" id="16"/>
<outlet property="delegate" destination="12" id="15"/>
</connections>
</tableView>
<navigationItem key="navigationItem" title="Bird Sightings" id="36"/>
</tableViewController>
</objects>
<point key="canvasLocation" x="459" y="64"/>
</scene>
<!--Hello World Detail View Controller - Detail-->
<scene sceneID="24">
<objects>
<placeholder placeholderIdentifier="IBFirstResponder" id="23" sceneMemberID="firstResponder"/>
<viewController storyboardIdentifier="" title="Detail" id="21" customClass="HelloWorldDetailViewController" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="22">
<rect key="frame" x="0.0" y="64" width="320" height="416"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<subviews>
<tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="static" style="plain" rowHeight="44" sectionHeaderHeight="22" sectionFooterHeight="22" id="bJd-7W-8nV">
<rect key="frame" x="0.0" y="0.0" width="320" height="445"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<sections>
<tableViewSection headerTitle="" id="Ihs-Gj-deH">
<cells>
<tableViewCell contentMode="scaleToFill" selectionStyle="blue" hidesAccessoryWhenEditing="NO" indentationLevel="1" indentationWidth="0.0" id="6ax-NG-pEn">
<rect key="frame" x="0.0" y="0.0" width="320" height="44"/>
<autoresizingMask key="autoresizingMask"/>
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
<rect key="frame" x="0.0" y="0.0" width="320" height="43"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Bird Name:" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="10" id="eba-dh-Ofl">
<rect key="frame" x="20" y="11" width="125" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<color key="highlightedColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</label>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Label" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="10" id="PBz-NZ-g9m">
<rect key="frame" x="153" y="11" width="147" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" white="0.66666666666666663" alpha="1" colorSpace="calibratedWhite"/>
<color key="highlightedColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</label>
</subviews>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
</view>
</tableViewCell>
</cells>
</tableViewSection>
<tableViewSection headerTitle="" id="YGG-h0-ybX">
<cells>
<tableViewCell contentMode="scaleToFill" selectionStyle="blue" hidesAccessoryWhenEditing="NO" indentationLevel="1" indentationWidth="0.0" id="oYs-Dm-zlN">
<rect key="frame" x="0.0" y="44" width="320" height="44"/>
<autoresizingMask key="autoresizingMask"/>
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
<rect key="frame" x="0.0" y="0.0" width="320" height="43"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Location:" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="10" id="mbD-Wl-CEY">
<rect key="frame" x="20" y="11" width="125" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<color key="highlightedColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</label>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Label" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="10" id="A69-jC-WXb">
<rect key="frame" x="153" y="11" width="147" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" white="0.66666666666666663" alpha="1" colorSpace="calibratedWhite"/>
<color key="highlightedColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</label>
</subviews>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
</view>
</tableViewCell>
</cells>
</tableViewSection>
<tableViewSection headerTitle="" id="zi6-o7-XN3">
<cells>
<tableViewCell contentMode="scaleToFill" selectionStyle="blue" hidesAccessoryWhenEditing="NO" indentationLevel="1" indentationWidth="0.0" id="gsv-CZ-0go">
<rect key="frame" x="0.0" y="88" width="320" height="44"/>
<autoresizingMask key="autoresizingMask"/>
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
<rect key="frame" x="0.0" y="0.0" width="320" height="43"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Date:" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="10" id="K2s-9i-tfj">
<rect key="frame" x="20" y="11" width="125" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<color key="highlightedColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</label>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Label" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="10" id="PTf-Ge-Hjf">
<rect key="frame" x="153" y="11" width="147" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" white="0.66666666666666663" alpha="1" colorSpace="calibratedWhite"/>
<color key="highlightedColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</label>
</subviews>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
</view>
</tableViewCell>
</cells>
</tableViewSection>
</sections>
</tableView>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
</view>
<navigationItem key="navigationItem" title="Sightings" id="26"/>
<connections>
<outlet property="lblBirdName" destination="PBz-NZ-g9m" id="KgV-rg-2MY"/>
<outlet property="lblDate" destination="PTf-Ge-Hjf" id="Scy-nS-Sot"/>
<outlet property="lblLocation" destination="A69-jC-WXb" id="hwm-Zv-8QE"/>
</connections>
</viewController>
</objects>
<point key="canvasLocation" x="902" y="64"/>
</scene>
</scenes>
<classes>
<class className="HelloWorldDetailViewController" superclassName="UITableViewController">
<source key="sourceIdentifier" type="project" relativePath="./Classes/HelloWorldDetailViewController.h"/>
<relationships>
<relationship kind="outlet" name="lblBirdName" candidateClass="UILabel"/>
<relationship kind="outlet" name="lblDate" candidateClass="UILabel"/>
<relationship kind="outlet" name="lblLocation" candidateClass="UILabel"/>
</relationships>
</class>
<class className="HelloWorldMasterViewController" superclassName="UITableViewController">
<source key="sourceIdentifier" type="project" relativePath="./Classes/HelloWorldMasterViewController.h"/>
</class>
</classes>
<simulatedMetricsContainer key="defaultSimulatedMetrics">
<simulatedStatusBarMetrics key="statusBar"/>
<simulatedOrientationMetrics key="orientation"/>
<simulatedScreenMetrics key="destination"/>
</simulatedMetricsContainer>
</document>
I am completely new to objective c and Xcode so I'm not sure what I'm doing wrong or even really where to begin with an error like that. If anyone knows how to fix this error, or a better (online) resource for learning both objective c and iOS development at the same time, I would really appreciate either one.
Here is my project if anyone wants to take a look at it for me.
I was able to find out what I did wrong on the tutorial. Rather than drag the TableViewController and delete the DetailViewController I dragged a table onto the controller on top of the detail view. I'm not sure how I missed that, I must have been really tired yesterday.
Also, anyone who is stuck on the apple iPhone development tutorial, I highly recommend the "Stanford iPhone development" series on iTunes. I'm going through it right now and it is amazing. It explains things that the apple tutorial never did (like when to use strong vs weak in properties, atomic vs nonatomic also in properties). I know I'm starting to understand objective c because I actually know what to google when I get stuck.