Known Participant

Question

Batch convert SVG to HTML?

Forum|Forum|3 years ago
June 14, 2022
2 replies
2163 views

Hi--I constantly need to convert SVG line art (generated in Solidworks Composer) into HTML, and have been looking for a way to automate the process. Typically, I open the SVG in Dreamweaver and "save-as" HTML. However, this gets tedious when I have more than a few images to convert. Online batch converters won't work for me because 1) the images are company-owned and confidential, and 2) the online conversions wipe out the interactive features added by Composer. Does Dreamweaver have a "batch convert" function or macro which would allow me to "save-as" several images at once? I'd appreciate any suggestions. Thanks!

How to

This topic has been closed for replies.

L

L e n a

Community Expert

what do you mean by converting SVG to HTML ?

what do you expect as result ?... what is the goal ?

that will help to better orient you.

suep89793525Author

Known Participant

Hello, Lena--Please see my response to Nancy O'Shea's comment. Hopefully that will help you to better understand what I am trying to do. Thank you.

Nancy OShea

Community Expert

You're mixing apples with oranges. SVG is XML code; not HTML code.

SVG is a math-based vector image. HTML is a web programming language used by browsers to display structure & content on screen. Two different things.

Build your HTML layout and semantic structure in Dreamweaver.
Use CSS to style it.
Use SVG images to replace raster JPG or PNG files in web pages.

Example SVG Code (generated by Illustrator):

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<path style="fill:#FF5959;" d="M145.836,474.844c-8.901,0-19.826-6.308-24.276-14.016L11.394,270.016
	c-4.451-7.709-4.451-20.323,0-28.031L121.559,51.173c4.451-7.708,15.375-14.016,24.276-14.016h220.33
	c8.901,0,19.826,6.308,24.276,14.016l110.164,190.812c4.451,7.709,4.451,20.323,0,28.031L390.442,460.828
	c-4.451,7.709-15.375,14.016-24.276,14.016H145.836z"/>
<g>
	<path style="fill:#FFFFFF;" d="M362.167,447.978H149.834c-2.892,0-5.562-1.542-7.008-4.046L36.66,260.046
		c-1.446-2.503-1.446-5.589,0-8.092L142.826,68.068c1.446-2.504,4.117-4.046,7.008-4.046h212.333c2.892,0,5.562,1.542,7.008,4.046
		l106.167,183.886c1.446,2.503,1.446,5.589,0,8.092L369.175,443.932C367.729,446.436,365.057,447.978,362.167,447.978z
		 M154.506,431.794h202.989L458.99,256L357.495,80.206H154.506L53.011,256L154.506,431.794z"/>
	<path style="fill:#FFFFFF;" d="M118.771,281.688c-1.473-1.052-2.525-2.84-2.525-4.944c0-3.366,2.735-5.997,6.1-5.997
		c1.789,0,2.946,0.525,3.789,1.157c6.1,4.839,12.623,7.575,20.618,7.575s13.047-3.787,13.047-9.258v-0.21
		c0-5.26-2.946-8.101-16.622-11.257c-15.674-3.787-24.513-8.416-24.513-21.987v-0.21c0-12.624,10.52-21.356,25.145-21.356
		c9.257,0,16.726,2.42,23.354,6.838c1.473,0.842,2.841,2.63,2.841,5.154c0,3.366-2.735,5.997-6.1,5.997
		c-1.262,0-2.315-0.316-3.367-0.947c-5.682-3.682-11.152-5.575-16.936-5.575c-7.575,0-11.993,3.892-11.993,8.732v0.21
		c0,5.681,3.365,8.205,17.569,11.573c15.569,3.787,23.564,9.363,23.564,21.566v0.21c0,13.781-10.836,21.987-26.299,21.987
		C136.446,290.946,126.977,287.789,118.771,281.688z"/>
	<path style="fill:#FFFFFF;" d="M204.509,228.246h-17.885c-3.365,0-5.996-2.735-5.996-5.997c0-3.261,2.63-5.997,5.996-5.997h48.92
		c3.26,0,5.89,2.735,5.89,5.997c0,3.262-2.63,5.997-5.89,5.997h-17.99v55.757c0,3.577-2.946,6.417-6.522,6.417
		c-3.576,0-6.522-2.84-6.522-6.417V228.246z"/>
	<path style="fill:#FFFFFF;" d="M247.324,253.283v-0.21c0-20.725,15.99-38.083,38.608-38.083c22.62,0,38.4,17.149,38.4,37.873v0.21
		c0,20.725-15.99,38.083-38.608,38.083C263.104,291.157,247.324,274.009,247.324,253.283z M310.761,253.283v-0.21
		c0-14.307-10.414-26.195-25.037-26.195c-14.625,0-24.829,11.678-24.829,25.986v0.21c0,14.308,10.414,26.09,25.037,26.09
		C300.558,279.163,310.761,267.591,310.761,253.283z"/>
	<path style="fill:#FFFFFF;" d="M340.005,222.775c0-3.682,2.841-6.522,6.522-6.522h22.515c17.252,0,27.984,9.784,27.984,24.617v0.21
		c0,16.517-13.255,25.143-29.457,25.143h-14.623v17.78c0,3.577-2.841,6.417-6.419,6.417c-3.681,0-6.522-2.84-6.522-6.417V222.775z
		 M367.988,254.546c9.784,0,15.888-5.47,15.888-13.15v-0.21c0-8.627-6.208-13.15-15.888-13.15h-15.042v26.511L367.988,254.546
		L367.988,254.546z"/>
</g>
<path style="fill:#1E252B;" d="M366.165,482.936h-220.33c-11.695,0-25.436-7.934-31.284-18.062L4.386,274.062
	c-5.848-10.128-5.848-25.995,0-36.123L114.551,47.127c5.848-10.128,19.589-18.062,31.284-18.062h220.33
	c11.695,0,25.436,7.934,31.284,18.062l110.165,190.812c5.848,10.128,5.848,25.995,0,36.123L397.45,464.875
	C391.602,475.003,377.86,482.936,366.165,482.936z M145.836,45.249c-6.025,0-14.256,4.752-17.269,9.97L18.402,246.03
	c-3.012,5.218-3.012,14.722,0,19.939l110.165,190.812c3.012,5.218,11.244,9.97,17.269,9.97h220.33c6.025,0,14.256-4.752,17.269-9.97
	L493.6,265.97c3.012-5.218,3.012-14.721,0-19.939L383.433,55.219c-3.012-5.218-11.244-9.97-17.269-9.97
	C366.164,45.249,145.836,45.249,145.836,45.249z"/>
</svg>

This is HTML document containing SVG code.

Hope that helps.

Nancy O'Shea— Product User & Community Expert

suep89793525Author

Known Participant

Hi Nancy--Yes, I understand the differences between SVG and HTML. But the SVG images generated by Solidworks Composer are unique. They actually resemble HTML "behind the scenes." I can open these SVGs directly in Dreamweaver and edit elements like color hex codes, embedded hyperlinks, and the file size. But I've found it's easier just to open the SVG in Dreamweaver, save-as HTML, and then edit the underlying HTML code in Notepad. All I'm looking for is a way to open and save out multiple SVG files as HTML all at once...simple image conversion. I just wondered whether or not Dreamweaver has a built-in function (like a macro) to do this. Looks like there used to be a "history" function at one time, but the latest version of DW doesn't seem to have it.

Nancy OShea

Community Expert

All I'm looking for is a way to open and save out multiple SVG files as HTML all at once... whether or not Dreamweaver has a built-in function (like a macro) to do this.

By @suep89793525

=============

Short Answer: No.

I don't know any code editor that can do that because as I already said, SVG is not HTML.

What your app generates may be a hybrid of two or more code bases but without seeing it, I can't comment.

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded