Custom SVG Symbology

with ESRI Javascript API

Alex Nguyen / GIS Developer / LJA Engineering, Inc.

What is SVG?

• Scalable Vector Graphics
• Circles, rectangles, and paths
• Can apply color and gradients

SVG Sample File

<svg id="esri-symbol" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 1024 1024">
  <!-- Grid -->
  <path d="M384.152 423.244c70.012-29.724 145.916-53.514 248.202-62.118-26.032-62.542-54.802-106.692-88.654-147.158-75.448 6.046-144.308 26.376-203.828 50.992 8.764 46.326 25.278 102.406 44.28 158.284zM710.544 595.662c-96.836-1.15-181.388 22.020-239.204 50.452 24.506 52.74 72.94 122.588 91.040 151.362 31.472-11.716 65.346-20.516 91.594-24.634 26.272-4.074 61.268-7.91 84.972-7.518-4.272-61.38-11.47-102.816-28.402-169.662zM453.846 610.924c77.396-35.59 162.366-51.614 247.942-49.272-23.336-80.92-36.746-118.454-56.57-167.7-95.094 4.116-176.212 27.564-250.096 62.574 0 0.002 27.226 87.522 58.724 154.398zM751.394 220.392c-47.442-8.61-116.676-14.074-168.026-10.948 35.018 48.486 60.708 90.698 84.806 150.882 64.954 1.594 153.226 20.988 189.424 35.198-21.614-57.592-62.648-130.682-106.204-175.132zM899.024 602.83c-2.924-53.47-11.118-124.874-30.944-174.6-52.502-21.102-124.266-34.278-187.252-34.85 19.408 45.33 42.028 121.096 53.048 169.85 45.526 5.466 116.732 18.334 165.148 39.6zM855.638 229.014c-67.706-82.89-220.92-153.454-391.484-142.826 38.112 25.142 69.836 63.076 97.618 94.336 42.608-3.888 132.042 3.14 165.706 12.442-5.732-6.78-12.76-13.49-14.566-17.464-4.764-10.292 6.704-12.484 15.912-6.598 11.67 7.45 25.142 16.376 35.82 27.248 19.768 4.422 68.44 21.118 90.994 32.862zM937.33 628.116c-1.944 6.634-13.624 13.306-19.074 11.642 0.792 11.796-1.944 70.504-5.032 93.134 8.126-16.756 23.712-58.292 28.364-75.834l6.616-25.814c6.552-21.952 27.798-97.726 8.558-197.426-21.376-110.73-61.458-150.28-75.45-167.882-35.588-19.356-89.468-36.922-89.468-36.922 48.808 66.094 65.716 97.198 94.91 175.886 16.914 8.81 47.67 25.832 51.488 30.512 3.082 3.674 3.1 10.292-6.538 10.148-8-0.072-23.592-7.75-35.606-10.948 12.81 42.87 22.75 122.948 21.98 176.612 0.002 0 21.19 10.24 19.252 16.892zM875.072 791.098c7.010-7.010 17.53-21.854 21.598-30.516 4.098-35.144 4.234-107.238 2.74-128.26-42.402-17.21-107.956-30.802-155.794-34.342 15.546 57.12 23.354 141.134 24.522 168.51 22.942 2.332 80.908 14.070 106.934 24.608zM766.17 887.674c37.138-23.12 71.98-49.732 97.26-81.708-21.786-5.48-70.43-12.086-94.53-10.552 0-0.002-0.764 57.84-2.73 92.26zM664.882 935.44c18.446-5.95 65.444-27.252 75.232-33.692 2.332-37.918 1.956-80.944 0.4-106.708-49.42 0-119.050 14.442-158.902 31.154 23.138 37.26 55.050 78.296 83.27 109.246zM442.772 903.020c13.808 13.952 68.542 50.178 68.542 50.178 36.388 1.566 82.366-2.696 115.222-8.446-18.116-20.646-63.316-84.648-77.028-106.172-35.018 14.674-79.336 41.662-106.736 64.44zM293.192 750.684c34.804 44.654 89.29 101.328 127.244 132.624 35.89-28.854 76.592-55.818 110.432-72.26-29.192-45.288-72.356-111.040-90.438-151.458-64.762 28.714-101.528 52.776-147.238 91.094zM200.626 571.63c22.16 63.3 43.624 111.58 71.622 151.408 32.754-28.476 99.914-73.452 151.242-98.046-16.91-36.358-41.308-104.308-58.34-155.208-66.112 32.45-115.52 64.104-164.524 101.846zM147.536 381.634c5.284 36.428 22.768 114.94 38.506 154.784 37.344-28.116 121.942-80.3 169.792-101.412-16.732-60.984-28-99.478-37.364-161.036-67.67 30.080-139.228 76.844-170.934 107.664zM139.344 251.922c-2.366 18.366 0.080 52.266 4.696 92.77 37.332-33.406 109.492-76.984 169.782-103.576-6.974-45.94-14.386-119.23-13.612-138.766-55.798 30.622-117.008 92.15-161.86 155.198M320.832 66.298c80.176-33.182 158.226-51.384 248.364-39.090 10.020 1.378 9.17 9.866-1.492 9.936l-12.692 0.34c-72.58 1.134-179.344 24.2-234.59 55.462-1.154 36.85 5.822 95.386 13.232 141.512 50.18-21.080 127.782-42.78 186.694-49.24-33.442-35.57-78.944-69.194-84.39-73.094-5.446-3.92-8.172-10.574-8.172-19.178 0.778-16.012 14.566-18.026 21.944-16.13 24.538-4.772 48.92-10.098 90.456-8.87 175.594-7.648 336.006 91.636 397.208 204.87 155.102 245.298 0.062 583.668-203.016 673.804-86.842 38.544-161.34 55.162-298.642 36.026-137.548-19.214-250.032-86.458-337.364-227.832-107.592-174.18-47.038-377.118-31.918-419.662 64.756-152.734 170.934-233.674 254.378-268.854zM113.686 368.156c-1.744-26.37-3.852-62.534-3.852-62.534-19.392 42.162-30.978 67.564-36.37 116.826 13.572-24.044 40.222-54.292 40.222-54.292zM397.048 902.9c-29.168-21.782-101.43-90.28-131.36-131.566-10.988 6.474-23.268 24.078-39.182 27.132-6.28 1.186-20.35 2.888-24.504 1.186-4.152-1.756 0.928-10.56 5.448-16.448 7.788-10.148 19.128-23.348 35.772-36.244-35.594-52.2-52.506-90.312-76.716-153.212-13.986 8.73-24.164 16.496-36.358 26.23-4.12 3.242-15.42 5.272-20.914 0.366-9.974-8.942-10.116-24.682 3.898-34.648 5.744-4.104 34.204-23.764 40.81-29.292-17.476-50.448-32.104-116.786-36.004-151.186-11.656 10.162-28.050 21.682-32.664 24.838-6.618 1.876-11.070-0.254-12.982-0.568-6.656 71.362 1.012 149.928 22.242 220.858 36.482 122.032 138.768 238.342 276.822 281.634 3.218-4.81 19.074-23.192 25.692-29.080zM469.004 951.76c-13.634-7.784-30.722-19.904-46.656-30.476-6.62 5.866-11.968 14.442-17.258 21.342 18.288 6.262 42.934 6.792 63.914 9.134z"></path>

  <path d="M166.664 551.344c-18.652-62.956 2.962-121.874 49.642-126.542 41.89-4.202 77.822-66.498 107.346-107.376 60.698-83.996 154.020-69.99 149.37-112.014-13.442-61.632-84.72-15.842-130.706-13.992-31.71 1.272-62.12 5.5-92.404 10.016-85.824 72.854-141.29 180.236-145.028 300.742 24.25 25.572 56.26 83.324 93.198 116.728 4.916-2.182 10.238-4.034 15.882-5.744-18.13-21.062-43.466-48.94-47.3-61.818zM449.692 779.518c21.736-56.616 34.018-81.576 4.648-140.004-64.65-18.26-84.24-24.026-149.338-37.374-33.96-6.94-35.2-5.128-73.416 5.978-6.076 1.744-11.996 3.358-17.622 5.042-6.084 1.932-8.588 1.932-15.882 5.744-15.080 6.76-26.028 17.068-28.574 39.112-4.586 39.986 33.404 71.342 65.482 80.516 40.616 11.636 44.018-1.938 65.342 26.858 14.904 20.124 17.782 57.482 25.394 82.060 4.276 13.758 9.99 27.412 16.888 40.808 29.030 13.5 59.85 23.808 92.106 30.266 7.994-47.416 4.36-111.368 14.972-139.006zM927.022 496.732c-5.016-113.626-56.030-215.254-134.952-286.72-7.396 2.072-16.834 2.43-29.672 0.086-85.566-15.578-105.74 34.402-130.682 70.014-19.040 27.204-85.908 34.652-107.346 65.314-16.712 23.88 0.552 70.898-14.016 98.026-6.69 12.49-3.616 48.736 4.576 60.554 25.754 37.478 68.488 16.678 100.714 30.144 39.258 16.4 43.73 61.928 76.362 95.292 32.592 33.376-41.652 84.746 18.958 206.070 6.498 13.054 14.026 22.6 22.134 29.13 40.984-25.512 77.086-58.024 106.736-95.84 9.208-61.29-11.5-80.898 14.388-136.978 15.956-34.596 43.262-94.476 72.8-135.092z"></path>
</svg>
          

Types of Point Symbols

• SimpleMarkerSymbol

  used to display points as a simple shape - limited to circles, cross, diamonds, squares, and X's

• PictureMarkerSymbol

  uses a raster image as a marker

Simple Marker Symbols

Esri main campus, main offices, and satellite offices

BORING!

Picture Marker Symbols

Esri main campus, main offices, and satellite offices

BLURRY!

SVG Marker Symbols

Esri main campus, main offices, and satellite offices

Perfect!

That's cool, show me the code!

// require dependencies here...

// The path strings from SVG file, concatenated
var svgPath = "M ... to z";

var svgSymbol = new SimpleMarkerSymbol()
  .setOutline(null) // no outlines
  .setSize(20) // 20 pixels
  .setColor("green")
  .setPath(svgPath);

var map = new Map("map");
map.on("load", function () {
  var point = new Point([-95.57408, 29.73736]); 
  var graphic = new Graphic(point, svgSymbol);
  map.graphics.add(graphic);
});

I'm not a designer, how can I get SVGs?

Go to town!

Thank you.

Happy Coding!