CSS changing the path of svg element

Question

I have a generated svg arrow, I want to change it to another shape, I don't know how to generate svg dots. Thats the first shape :

<div id="map_outer" style="position: absolute; left: 3px; z-index: 1;">
<svg height="35" version="1.1" width="35" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
</defs>
<path fill="#cecece" stroke="#808080" d="M503.7,743.8C694,647.1999999999999,636.6,326.74999999999994,348.1,334.09V205.39L120.00000000000003,400.39L348.1,606.19V474.59000000000003C589,469.09000000000003,578,677.3900000000001,503.70000000000005,743.8900000000001Z" stroke-width="40" stroke-opacity="1" fill-opacity="1" transform="matrix(0.05,0,0,0.05,-1.9,-5.7)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; fill-opacity: 1; cursor: pointer;">
</path>
</svg>
</div>

I want to change it to this shape:

EDIT:: The solution above worked if the code is made by me, but in my case the code is generated and I want to overwrite it in css :

#map_outer svg path{
    d:"M 850 300 C 850 300 350 300 350 300 L 348.1 205.39 L 120 400.39 L 348.1 606.19 L 350 500 C 850 500 850 500 850 500 z" !important;
    stroke-width: 0;
}

I get d: Unknown property name in the browser inspector

Answer 1

<svg>
  <path d="M 0 15
           L 35 0
           L 35 8
           L 70 8
           L 70 22
           L 35 22
           L 35 30"
        fill="#FFCC00" />
</svg>

M 0 15 is the starting point (width=0 & height=15px), then you can make your path with the points L and their respective location (width & height). In the end it connects back to the starting point.

Here's a good place to learn about that.

Edit:

Here's your code working as you want without many major changes:

<div id="map_outer" style="position: absolute; left: 3px; z-index: 1;">
<svg height="35" version="1.1" width="70" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
</defs>
<!--
<path fill="#cecece" stroke="#808080" d="M503.7,743.8C694,647.1999999999999,636.6,326.74999999999994,348.1,334.09V205.39L120.00000000000003,400.39L348.1,606.19V474.59000000000003C589,469.09000000000003,578,677.3900000000001,503.70000000000005,743.8900000000001Z" stroke-width="40" stroke-opacity="1" fill-opacity="1" transform="matrix(0.05,0,0,0.05,-1.9,-5.7)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; fill-opacity: 1; cursor: pointer;">
</path>
-->
<path fill="#ffcc00" stroke="#808080" d="M 0 15 L 35 0 L 35 8 L 70 8 L 70 22 L 35 22 L 35 30 Z" stroke-width="0" stroke-opacity="1" fill-opacity="1" transform="matrix(0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; fill-opacity: 1; cursor: pointer;">
</path>
</svg>
</div>

Answer 2

I can teach you even if you don't know how to create shapes in svg.

Step-1: Download metro studio here: https://www.syncfusion.com/downloads/metrostudio

step-2: Install it and open it

step-3: Search for Arrow

step-4: Select the icon that satisfy your needs and press edit button on that arrow. For reference take a look at this image:

step-5: Click on code in the bottom left corner as shown in picture below:

step-6: Click on SVG Tab and you will get it.

If you have any other problems then feel free to ask.

Update:

Here is the svg code for arrow:

<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="0 0 48 48">
  <g>
    <path id="path1" transform="rotate(0,24,24) translate(11,15.9968754649162) scale(0.8125,0.8125)  " fill="#FFFFFF" d="M13,3.3000036L3,9.8999957 13,16.399996 13,11.300005 29.799988,13.500002 29.799988,6.1999978 13,8.3000039z M15.200012,0L15.200012,6.8999947 32,4.8000039 32,14.899996 15.200012,12.699999 15.200012,19.699999 0,9.8999957z" />
  </g>
</svg>