Skip to main content
Glama

get_node_svg

Extract SVG code from Figma design elements to integrate vector graphics into web projects or applications.

Instructions

获取节点的SVG数据

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
urlYesFigma文件URL,必须包含node-id参数

Implementation Reference

  • The main MCP tool handler for 'get_node_svg'. Parses the Figma URL from args, validates node-id, fetches SVG via elementExtractor, logs progress, and returns structured JSON response with success/error handling.
    private async handleGetNodeSVG(args: any) {
      const { url } = args;
    
      try {
        console.error(`开始获取节点SVG数据: ${url}`);
        
        const urlInfo = this.figmaService.parseUrl(url);
        if (!urlInfo.nodeId) {
          throw new Error('URL中缺少node-id参数');
        }
    
        const svgData = await this.elementExtractor.getNodeAsSVG(urlInfo.fileId, urlInfo.nodeId);
    
        console.error(`成功获取SVG数据,长度: ${svgData.length} 字符`);
        
        return {
          content: [
            {
              type: 'text',
              text: JSON.stringify({
                success: true,
                data: {
                  svg: svgData,
                  fileId: urlInfo.fileId,
                  nodeId: urlInfo.nodeId,
                  dataLength: svgData.length,
                },
              }, null, 2),
            },
          ],
        };
      } catch (error) {
        const errorMessage = error instanceof Error ? error.message : '未知错误';
        console.error(`获取SVG数据失败: ${errorMessage}`);
        
        return {
          content: [
            {
              type: 'text',
              text: JSON.stringify({
                success: false,
                error: errorMessage,
                troubleshooting: {
                  commonIssues: [
                    '检查节点是否为矢量图形或可导出为SVG',
                    '确认Figma token权限是否充足',
                    '验证节点ID格式是否正确',
                  ],
                }
              }, null, 2),
            },
          ],
        };
      }
    }
  • Input schema and metadata for the 'get_node_svg' tool, defined in the tools list returned by ListToolsRequestHandler. Requires a single 'url' property.
    {
      name: 'get_node_svg',
      description: '获取节点的SVG数据',
      inputSchema: {
        type: 'object',
        properties: {
          url: {
            type: 'string',
            description: 'Figma文件URL,必须包含node-id参数',
          },
        },
        required: ['url'],
      },
    },
  • src/index.ts:212-213 (registration)
    Registration of the tool handler in the CallToolRequestSchema switch statement, dispatching calls to handleGetNodeSVG.
    case 'get_node_svg':
      return await this.handleGetNodeSVG(args);
  • Core helper function in FigmaService that implements SVG export by calling Figma's images API with format='svg', retrieves the temporary SVG URL, and fetches the SVG content.
    async getNodeAsSVG(fileId: string, nodeId: string): Promise<string> {
      try {
        const images = await this.exportImage(fileId, [nodeId], { format: 'svg' });
        const svgUrl = images[nodeId];
        
        if (!svgUrl) {
          throw new Error(`无法获取节点 ${nodeId} 的SVG数据`);
        }
    
        // 下载SVG内容
        const response = await axios.get(svgUrl);
        return response.data;
      } catch (error) {
        throw new Error(`获取SVG数据失败: ${error instanceof Error ? error.message : '未知错误'}`);
      }
    }
  • Thin wrapper in FigmaElementExtractor that delegates SVG extraction to the underlying FigmaService.
    async getNodeAsSVG(fileId: string, nodeId: string): Promise<string> {
      try {
        return await this.figmaService.getNodeAsSVG(fileId, nodeId);
      } catch (error) {
        throw new Error(`获取SVG数据失败: ${error instanceof Error ? error.message : '未知错误'}`);
      }
    }
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It only states the action ('获取' - get) without mentioning permissions, rate limits, output format, or whether it's a read-only operation. For a tool with no annotations, this leaves critical behavioral traits unspecified.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence ('获取节点的SVG数据') with no wasted words. It's appropriately sized for a simple tool, though it could be more front-loaded with additional context to improve clarity without sacrificing brevity.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no annotations, no output schema, and a simple input schema, the description is incomplete. It doesn't explain what 'node' refers to (e.g., Figma design node), the format of the SVG data returned, or any error conditions. For a tool in a context with multiple sibling tools, more detail is needed to guide proper use.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The description adds no parameter semantics beyond what the input schema provides. With 100% schema description coverage, the schema already documents the single parameter 'url' as 'Figma文件URL,必须包含node-id参数' (Figma file URL, must include node-id parameter). The baseline score of 3 reflects adequate coverage by the schema alone.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose3/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description '获取节点的SVG数据' (Get node SVG data) states a clear verb ('获取' - get) and resource ('节点的SVG数据' - node SVG data), but it's vague about what type of node and from what system. It doesn't differentiate from siblings like 'get_node_images' or 'extract_node_elements', leaving ambiguity about scope and specificity.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives. Given siblings like 'get_node_images' and 'extract_node_elements', the description lacks any context about use cases, prerequisites, or exclusions, leaving the agent to guess based on tool names alone.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Echoxiawan/figma-mcp-full-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server