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
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Figma文件URL，必须包含node-id参数 |
Implementation Reference
- src/index.ts:430-484 (handler)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), }, ], }; } }
- src/index.ts:154-167 (schema)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);
- src/figma-service.ts:201-216 (helper)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 : '未知错误'}`); } }
- src/element-extractor.ts:66-72 (helper)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 : '未知错误'}`); } }