I am developing a webpart with for SharePoint. I use the SharePoint Framework, TypeScript and ReactJS.
I need to use svg image.
But when I paste my svg image code into my webpart, I have error and I can't build.
For the test, I use the base webpart generate by SharePoint when we create a new project.
When I build, I have this kind of error :
Error - typescript - src\webparts\graph\components\Graph.tsx(28,8): error TS1003: Identifier expected.
I created my svg with inkscape and I edited it to work with ReactJS.
Could you help me ?
The svg :
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="100%"
height="100%"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1">
<path
d="m 560,315.21933 a 265.71429,234.28572 0 1 1 -531.428589,0 265.71429,234.28572 0 1 1 531.428589,0 z"
id="path2985"
style={{fill:#ffff00;fill-opacity:1;stroke:none}} />
</g>
</svg>
I finally find a solution.
I use svg to react cli (https://www.npmjs.com/package/svg-to-react-cli) to transform my svg into react component. Then I remove the tag defs and metadata. To finish, I paste my svg code in my react component. And it works fine.
Related
Versions:
React: 18.2.0
NextJS: 12.2.0
Simple image asset is just refusing to load when is used inside <img /> tag with src attribute set to data:image/svg+xml;utf-8,[svg data here]
When I paste this url data:image/svg+xml;utf-8,[svg data here] directly in the browser everything loads fine as expected the source image is there and all other things. The next.config has all the required image configuration and in the code for the image currently we use normal <img /> tag. The asset loads fine when its not called like svg, e.g. src="https://external-api/image.jpeg" In the network tab the response for the image is 200 all the time, but the preview shows only the svg styles with the default placeholder for missing image.
If I paste the image in THIS online encoder the image is NOT loading (behaves like in my problem), but if I copy the encoded url from the page and paste it in new chrome tab the image loads w/o any problem.
Examples:
Source image
Svg code that goes in to the src
data:image/svg+xml;utf-8,%3Csvg viewBox='0 0 1044 1054' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg opacity='.7' filter='url(%23a)'%3E%3Cpath d='M309.796 414.322 190.497 535.433 467.98 803.76l119.299-121.111-277.483-268.327Z' fill='%23000'/%3E%3C/g%3E%3Cmask id='b' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='116' y='91' width='837' height='837'%3E%3Crect width='440' height='1000' rx='220' transform='matrix(-.70604 .70817 .70746 .70675 335.664 0)' fill='%23000'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath fill='url(%23c)' d='M109 84h850v850H109z'/%3E%3C/g%3E%3Crect width='294.223' height='822.461' rx='147.112' transform='matrix(-.70575 .70846 .70718 .70704 228.716 325)' fill='url(%23d)'/%3E%3Cdefs%3E%3Cpattern id='c' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23d'/%3E%3C/pattern%3E%3Cfilter id='a' x='.497' y='224.322' width='776.782' height='769.437' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='95' result='effect1_foregroundBlur_3332_33632'/%3E%3C/filter%3E%3Cimage id='d' width='1' height='1' xlink:href='https://fakeimg.pl/250x300/fff000/'/%3E%3C/defs%3E%3C/svg%3E
And how is renderd in the app
What was tried:
If the image is encoded in base64 works, but with huge performace drawbacks mainly on older IOS devices.
Next config option for dangerouslyAllowSVG doesn't change anything...
The question may be trivial but I am a bit confused. I imported to my React app some SVG files and I wonder what is the best place to keep them to have a clean file structure. I have two folders that I assume could be the best for them. The first is ./src/Assets/Icons folder and another one is the ./src/Components/Icons folder.
I am using SVG as a component like here so I am not sure if it will be better to have them in Assets or in Components. What are your best practices and how do you approach that?
return (
<svg
width="35"
height="36"
viewBox="0 0 35 36"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M30.8385 0.414062H4.16151C2.05801 0.414062 0.350006 2.26846 0.350006 4.55226V31.4487C0.350006 33.7325 2.05801 35.5869 4.16151 35.5869H30.8385C32.942 35.5869 34.65 33.7325 34.65 31.4487V4.55226C34.65 2.26846 32.942 0.414062 30.8385 0.414062ZM7.97301 2.48506C8.44901 2.48506 26.523 2.48506 27.027 2.48506V15.9333C27.027 16.5033 26.5965 16.9669 26.075 16.9669H8.92501C8.40001 16.9669 7.97301 16.5033 7.97301 15.9333V2.48506ZM32.746 31.4487C32.746 32.5925 31.8955 33.5159 30.842 33.5159H4.16151C3.10801 33.5159 2.25751 32.5925 2.25751 31.4487V4.55226C2.25751 3.40846 3.10801 2.48506 4.16151 2.48506H6.06551V16.9669C6.06551 18.1107 6.91601 19.0341 7.96951 19.0341H27.0235C28.077 19.0341 28.9275 18.1069 28.9275 16.9669V2.48506H30.8315C31.885 2.48506 32.7355 3.41226 32.7355 4.55226V31.4487H32.746Z"
fill="#11100E"
/>
<path
d="M22.2635 12.8284C22.7885 12.8284 23.2155 12.3648 23.2155 11.7948V7.65665C23.2155 7.08665 22.785 6.62305 22.2635 6.62305C21.742 6.62305 21.3115 7.08665 21.3115 7.65665V11.7948C21.3115 12.3648 21.7385 12.8284 22.2635 12.8284Z"
fill="#11100E"
/>
</svg>
);
};
export default SaveIcon;
Below is my svg code and I get the following error message on firefox browser:
XML Parsing Error: prefix not bound to a namespace
Location: http://localhost/spm_dev/material-design-iconsets/iconsets/action-icons.svg
Line Number 50, Column 84:
The icon shows up but click event listener on the icon is not working on firefox while it works on chrome and microsoft edge. Please I need your help. What am I doing wrong.
<g id="event_seat"><defs><path id="a" d="M0 0h24v24H0V0z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path d="M4 18v3h3v-3h10v3h3v-6H4zm15-8h3v3h-3zM2 10h3v3H2zm15 3H7V5c0-1.1.9-2 2-2h6c1.1 0 2 .9 2 2v8z" clip-path="url(#b)"/></g>
I am having the weirdest problem with an svg filter and I'm not sure how to debug the problem or what the fix might be.
I have a drop shadow filter that I'm applying to a circle. Here is the SVG markup that I'm using (only showing one arc of the donut chart for brevity):
<svg height="240" width="240">
<defs>
<filter width="130%" height="130%" id="dropshadow">
<feGaussianBlur stdDeviation="1" result="blur-out" in="SourceAlpha">
</feGaussianBlur>
<feOffset result="shadow-out" dy="2" dx="1" in="blur-out">
</feOffset>
<feColorMatrix result="color-out" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0" type="matrix" in="shadow-out">
</feColorMatrix>
<feBlend mode="normal" in2="color-out" in="SourceGraphic">
</feBlend>
</filter>
</defs>
<g transform="translate(120,120)" class="donut">
<g class="arcs">
<g class="arc">
<path d="M-63.63961030678927,-63.63961030678928A90,90 0 1,1,-29.811356451234897,84.91927358696267L-27.492695393916627,78.31444119686557A83,83 0 1,0 -58.68986283848344,-58.68986283848345Z" class="a"></path>
<circle transform="translate(91.16631091370033,-20.75942567573879)" filter="url(#dropshadow)" r="17" class="a"></circle>
<text transform="translate(91.16631091370033,-20.75942567573879)" text-anchor="middle" dy=".35em" class="chart-label">30</text>
</g>
</g>
</g>
</svg>
This is how it renders in Internet Explorer, Chrome, and Firefox:
However, when I add the chart to my application which uses angularjs/bootstrap and open it up with Firefox it renders like this:
The drop shadow is no longer working and neither is the fill color for the circle. Even if I select the element and apply a fill directly, it still doesn't work. However, if I delete the filter from the circle (fill="url(#dropshadow)"), the fill color starts working again. Note that the chart renders correctly in all other browsers.
What could be causing the fill to suddenly stop working only in Firefox and only when added to my angularjs/bootstrap project?
When you re-add the filter using inline css (style="filter:...").
Does it work again then?
I have re-created my app from scratch using xcode 5 and ios 7. I have set the deployment target to ios 5.0. I am able to run the app successfully on all the ios 5.0+ simulators using xcode 5. And I am able to archive the ios 7.0 version of my app to my iphone without issues.
The issue arises when I try to build by app with the ios 6.1 sdk using xcode 4.6.3. I get the following build error:
"The document Main.storyboard could not be opened. Could not read archive."
I open that file in source code view, and see this on the top:
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="4510" systemVersion="12E55" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" initialViewController="rS3-R9-Ivy">
I change the version to 2.0, which is the advice some people are giving. After doing this, I clean and rebuild and get the following error:
"The document Main.storyboard could not be opened. Failed to unarchive element named 'tableViewCellContentView'."
I am not sure what to do at this point. If it helps, tableViewCellContent shows up two times in the storyboard source:
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="jxu-2I-e7e" id="p3Z-Dy-Wwr">
<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" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Share Location" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="QHi-wS-Lfa">
<rect key="frame" x="20" y="11" width="116" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<switch opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="750" verticalHuggingPriority="750" contentHorizontalAlignment="center" contentVerticalAlignment="center" on="YES" id="jfR-fE-3PU">
<rect key="frame" x="251" y="6" width="51" height="31"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<inset key="insetFor6xAndEarlier" minX="20" minY="-2" maxX="-20" maxY="2"/>
</switch>
</subviews>
</tableViewCellContentView>
and
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="ase-uh-S8O" id="Qfa-Dd-22s">
<rect key="frame" x="0.0" y="0.0" width="320" height="43"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="left" text="Title" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="m8y-pR-Z3V">
<rect key="frame" x="15" y="3" width="36" height="22"/>
<autoresizingMask key="autoresizingMask"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="18"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="left" text="Subtitle" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="4bW-Fg-tmx">
<rect key="frame" x="15" y="25" width="43" height="15"/>
<autoresizingMask key="autoresizingMask"/>
<fontDescription key="fontDescription" type="system" pointSize="12"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</tableViewCellContentView>
If I remove those two snippets above from the source, I can successfully open the storyboard in xcode 4.6.3 using the ios 6.1 sdk. However, the UI is not correct as a result.
Any ideas what part of this could not be backwards compatible with ios 6.1 sdk?
You can make a storyboard file created/updated using Xcode 5 compatible with Xcode 4.6 by setting the option as below.
However you will not be able to make iOS 7 related UI changes once you do that.