symbolService

AMD: require(["esri/rest/symbolService"], (symbolService) => { /* code goes here */ });
ESM: import * as symbolService from "@arcgis/core/rest/symbolService";
Object: esri/rest/symbolService
Since: ArcGIS API for JavaScript 4.25

Represents symbol service resources exposed by the ArcGIS REST API. This module provides resources to convert Scalable Vector Graphics (SVG) to CIMSymbols.

Method Overview

Name Return Type Summary Object
Promise<GenerateSymbolResponse>

Converts a Scalable Vector Graphic (SVG) to a CIMSymbol.

more details
symbolService

Method Details

generateSymbol(url, params, requestOptions){Promise<GenerateSymbolResponse>}

Converts a Scalable Vector Graphic (SVG) to a CIMSymbol.

If using a SVG string value in the GenerateSymbolParameters, the XML namespace (xmlns) must be defined. For SVGs defined in FormData or an HTMLFormElement, the name of the element in the form must be "svgImage", as shown in the examples below.

The returned CIMSymbol will always be a CIMPointSymbol with a CIMVectorMarker symbol layer where size = 10. To update the size of the symbol, use cimSymbolUtils.scaleCIMSymbolTo().

Parameters
url String

URL to the ArcGIS Server REST resource that represents a symbol service.

Input parameters for converting an SVG to CIM Symbol.

requestOptions RequestOptions
optional

Additional options to be used for the data request (will override requestOptions defined during construction).

Returns
Type Description
Promise<GenerateSymbolResponse> A promise that resolves with the response of the generate symbol method that contains the CIM Symbol.
Examples
// Using a string.
const svgString = `
   <svg xmlns="http://www.w3.org/2000/svg" height="200" width="200">
     <path d="M150 0 L75 200 L225 200 Z" />
   </svg>
`;
const params = { svgImage: svgString };
symbolService.generateSymbol(symbolServiceUrl, params).then({symbol} => {
  // apply the CIMSymbol to a graphic
  graphicA.symbol = symbol;
});
// Using FormData.
const blob = new Blob([svgSymbol.trim()], { type: "image/svg+xml" });
const formData = new FormData();
formData.append("svgImage", blob, "symbol.svg");

const params = { svgImage: formData };
symbolService.generateSymbol(symbolServiceUrl, params).then({symbol} => {
  // apply the CIMSymbol to a graphic
  graphicB.symbol = symbol;
});
// Using HTMLFormElement.
<!-- HTML Element -->
<form name="uploadForm">
  <input type="file" name="svgImage" id="svgFile" />
</form>
// JavaScript
const uploadForm = document.forms["uploadForm"];
uploadForm.addEventListener("change", (event) => {
    const fileName = event.target.value.toLowerCase();
    if (fileName.includes(".svg")) {
        const params = { svgImage: uploadForm };
        symbolService.generateSymbol(symbolServiceUrl, params).then({symbol} => {
           // apply the CIMSymbol to a graphic
           graphicC.symbol = symbol;
        });
    }
});

Type Definitions

GenerateSymbolParameters Object

Input parameters for the generateSymbol method.

Property
optional

The SVG image to convert. Can be an SVG string value, form data, or form element. When providing the SVG from FormData or HTMLFormElement, the name of the element in the form must be "svgImage". When providing the SVG from a string, the XML namespace (xmlns) must be defined.

GenerateSymbolResponse Object

The response of the generateSymbol method.

Property
symbol CIMSymbol

The CIMSymbol created from the generateSymbol method.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.