• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Batch convert SVG to HTML?

Explorer ,
Jun 14, 2022 Jun 14, 2022

Copy link to clipboard

Copied

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! 

TOPICS
How to

Views

498

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 14, 2022 Jun 14, 2022

Copy link to clipboard

Copied

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.

 

  1. Build your HTML layout and semantic structure in Dreamweaver.  
  2. Use CSS to style it. 
  3. 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.

image.png

 

Hope that helps.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 15, 2022 Jun 15, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 15, 2022 Jun 15, 2022

Copy link to clipboard

Copied

quoteAll 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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 15, 2022 Jun 15, 2022

Copy link to clipboard

Copied

Well, I appreciate your responses regardless. I pretty much exhausted every Internet resource I know of and couldn't find a solution, so posting here was a last-ditch effort.  Composer is sort of an unusual app and not well documented for this type of output.  So I'll continue as is. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 15, 2022 Jun 15, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 15, 2022 Jun 15, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 15, 2022 Jun 15, 2022

Copy link to clipboard

Copied

quote

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. 

By @suep89793525

 

I admit I don't really understand the flow you are aiming for!
I understand that you want to be able to change some visual properties of your(s) SVG, is that right?
In this case, have you tried Ai?
If it does the job, it's always possible then to script batches directly from Br.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 15, 2022 Jun 15, 2022

Copy link to clipboard

Copied

Thank you for responding. Yes, my particular SVG files can be opened in AI; however, the Solidworks Composer app embeds hotspots and interactive features when I generate the SVGs. Opening them in AI destroys those embedded features.  I guess I'll just continue as I have been doing. It works, even though it has to be image-by-image.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 15, 2022 Jun 15, 2022

Copy link to clipboard

Copied

LATEST

It seems strange to me, but well, without seeing the file I can only make guesses.


Are the script files internal to your SVG file? If so, check the integration so that Ai does not corrupt it.


For my part, all the interactive SVG files I have to manage, I opt to externalize the main JS file, and keep within AI only the listeners/triggers which are very well handled by DW's interactions palette.
If this is the case, check that the link to the JS file is not corrupted.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines