How to draw SVG arrowhead through script

[nishanthinis852599]

Hello All,

I'm looking for an option to draw SVG arrowhead through script. 

PFB svg arrow drawn using svg reference element(marker). When SVG file is opened in adobe illustrator, there is data loss. 

Have any one experienced this. Is there any alternate way to draw svg arrowhead?

[Eugenio.NYC]

Could you share the SVG code?

[nishanthinis852599]

<svg version="1.0'" id="svgDoc" x="0" y="0" width="663.306" height="484.725" enable-background="new 0 0 663.307 484.724" xml:space="preserve" style="overflow: overlay;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" >

	<defs id="pattern-defs">

		<marker viewBox="0 0 10 10" refX="10" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse" id="arrow-end-#ff0000" markerUnits="userSpaceOnUse">
			<path d="M 0 0 L 10 5 L 0 10" stroke="#ff0000" fill="none">
			</path>
		</marker>
	</defs>
	<g id="test">
		<path fill="none" stroke="#ff0000" stroke-width="0.75" d="M137.28208923339844 83.24221801757812 L139.28301493326822 82.5752436319987 L141.2839385986328 81.04120178222657 L143.71363176618303 78.81160191127232 L146.9532216389974 75.79433695475261 L149.8333379572088 73.23760154030539 L152.9816436767578 70.69796782273512 L156.1574686686198 68.23529281616212 L159.0568452722886 66.05781734690947 L161.55645109477797 64.28610189337479 L162.69381790161134 63.533122825622556 L165.09492568969728 61.882361030578615 L167.49603347778321 60.38166847229004 L169.84711837768555 59.13109130859375 L172.09815673828126 57.98056049346924 L174.3491958618164 57.130167961120605 L176.50018844604492 56.42984485626221 L178.5011116027832 56.07968311309814 L180.35196533203126 56.179729270935056 L182.05275039672853 56.679960060119626 L183.75353546142577 57.380283164978025 L185.30425109863282 58.48079090118408 L186.70489730834962 59.73136806488037 L187.90545120239258 61.182037353515625 L188.9559356689453 62.88282222747803 L189.85635070800782 64.73367614746094 L190.65671997070314 66.73459930419922 L191.40706634521484 68.88559169769287 L192.1073890686035 71.13663024902344 L192.7576889038086 73.43769207000733 L193.35796585083008 75.83880004882812 L193.90821990966796 78.28993110656738 L194.35842742919922 80.69103908538818 L194.75861206054688 83.09214687347412 L195.15879669189454 85.54327774047852 L195.45893478393555 87.89436264038086 L195.75907287597656 90.2954704284668 L195.95916519165038 92.69657821655274 L196.10923461914064 94.99763984680176 L196.20928039550782 97.14863204956055 L196.2593032836914 99.19957847595215 L196.309326171875 101.10045585632324 L196.309326171875 103.0013328552246 L196.309326171875 104.9522331237793 L196.309326171875 106.85311012268066 L196.309326171875 108.80401039123535 L196.309326171875 110.80493392944337 L196.309326171875 112.75583419799804 L196.309326171875 114.70673484802246 L196.309326171875 116.65763511657715 L196.309326171875 118.55851211547852 L196.309326171875 120.40936584472657 L196.309326171875 122.21019706726074 L196.309326171875 123.91098213195801 L196.309326171875 125.56174392700196 L196.309326171875 127.21250534057617 L196.309326171875 128.81324424743653 L196.309326171875 130.31393699645997 L196.309326171875 131.71458320617677 L196.309326171875 133.11522941589357 L196.309326171875 134.46585273742676 L196.309326171875 135.76645278930664 L196.309326171875 137.11707572937013 L196.309326171875 138.41767616271972 L196.309326171875 139.66825332641602 L196.309326171875 140.868807220459 L196.309326171875 141.9693145751953 L196.309326171875 143.0698226928711 L196.309326171875 144.12030715942382 L196.309326171875 145.17079162597656 L196.309326171875 146.2157185872396 L196.309326171875 147.27176094055176 L196.309326171875 148.34368460518974 L196.309326171875 149.4394276936849 L196.309326171875 150.5732849121094 L196.309326171875 151.7738380432129 L196.309326171875 152.77429962158203 L196.309326171875 153.77476119995117 L196.309326171875 154.7752227783203" class="base_1595255949292 deletable draggable resizable rotatable" style="cursor: crosshair;" marker-end="url(#arrow-end-#ff0000)">
		</path>
	</g>
</svg>

[m1b]

Hi, here is an example of a fairly normal svg generated straight from Illustrator. Note I've used a symbol for the arrowhead, assuming that you'd re-use it many times in the same file. Only tested in Chrome and Safari on MacOS. See "Save As..." settings below, too. My apologies if this misses the point, but it is an alternative way.

Regards,

Mark

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="svgDoc" xmlns:ev="http://www.w3.org/2001/xml-events"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 663.3 484.7"
	 style="enable-background:new 0 0 663.3 484.7;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#FF0000;stroke-width:0.5;stroke-miterlimit:2;}
	.st1{fill:none;stroke:#FF0000;stroke-width:0.5;}
</style>
<symbol  id="arrowhead-01" viewBox="-2.6 -2.7 5.2 5.4">
	<path class="st0" d="M-2.5,2.5l5-2.5l-5-2.5"/>
</symbol>
<use xlink:href="#arrowhead-01"  width="5.2" height="5.4" x="-2.6" y="-2.7" transform="matrix(1 0 0 -1 263.1581 202.5013)" style="overflow:visible;"/>
<path class="st1" d="M265.7,202.5c-24.7-1.7-29.8,17.1-29.8,32.9"/>
</svg>