如何在TMS Web Core的TWebImageControl中使用SVG图片？

直接将SVG字符串赋值给TWebImageControl.Picture属性无效，因为该属性不支持直接接收原始SVG文本，需要通过流加载的方式实现，同时要修正SVG内容中的语法错误。

问题分析 #

1. 原代码直接赋值SVG字符串的方式不符合Picture属性的加载逻辑；
2. SVG中的height="IconSize"是无效的，浏览器无法识别变量名，需要替换为具体数值；
3. 代码里的24' + '-88是错误的字符串拼接，应修正为24-88。

解决方案代码 #

var
  SVGStream: TMemoryStream;
  SVGContent: string;
begin
  // 替换IconSize为实际尺寸（如32），修正SVG语法错误
  SVGContent := '<svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 0 512 512"><!--FA--><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></svg>';
  
  SVGStream := TMemoryStream.Create;
  try
    // 将SVG字符串写入内存流
    SVGStream.WriteBuffer(SVGContent[1], Length(SVGContent) * SizeOf(Char));
    SVGStream.Position := 0;
    // 加载到TWebImageControl
    PhoneWIC.Picture.LoadFromStream(SVGStream);
  finally
    SVGStream.Free;
  end;
end;

额外说明 #

• TWebImageControl支持SVG格式，但必须通过LoadFromStream或LoadFromFile方法加载；
• 若需动态调整图标大小，可修改SVG中的height/width属性，或直接设置TWebImageControl的Width和Height属性；
• 确保SVG内容语法正确，避免字符串拼接错误或无效属性值。

内容的提问来源于stack exchange，提问作者Puffer Fish