svg logo to resized

[Calteo]

Operating System: Windows

DocFX Version Used: 2.48.1.0

Template used: default

Steps to Reproduce:

1. Added a custom svg file for a logo under images
2. added corresponding globalMetadata / _appLogoPath
3. ran docfx

Expected Behavior: the custom logo is displaye at correct scale (height = 50?)

Actual Behavior: the custom logo is show in its designed size (height = 150)

This is true for all current browsers (Chrome, Firefox, Edge). The svg tag sets the with and height to 150. It should be "auto" and a attribute viewBox='0 0 150 150' should be added. Then the logo is displayed correctly.

[KalleOlaviNiemitalo]

The 150px height is not hardcoded in DocFX; it comes from the custom SVG file. When the page is loaded, the renderLogo function finds the img element in the HTML DOM and replaces it with the content of the SVG file, so that the CSS rules will apply to the elements within.

docfx/src/docfx.website.themes/default/styles/docfx.js

Lines 724 to 755 in 3cd380a

	function renderLogo() {
	// For LOGO SVG
	// Replace SVG with inline SVG
	// http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement
	jQuery('img.svg').each(function () {
	var $img = jQuery(this);
	var imgID = $img.attr('id');
	var imgClass = $img.attr('class');
	var imgURL = $img.attr('src');
	jQuery.get(imgURL, function (data) {
	// Get the SVG tag, ignore the rest
	var $svg = jQuery(data).find('svg');
	// Add replaced image's ID to the new SVG
	if (typeof imgID !== 'undefined') {
	$svg = $svg.attr('id', imgID);
	}
	// Add replaced image's classes to the new SVG
	if (typeof imgClass !== 'undefined') {
	$svg = $svg.attr('class', imgClass + ' replaced-svg');
	}
	// Remove any invalid XML tags as per http://validator.w3.org
	$svg = $svg.removeAttr('xmlns:a');
	// Replace image with new SVG
	$img.replaceWith($svg);
	}, 'xml');
	});
	}

docfx/src/docfx.website.themes/default/styles/docfx.css

Lines 83 to 85 in 3cd380a

	svg:hover path {
	fill: #ffffff;
	}

The DocFX logo.svg has width="38.000000pt" height="38.000000pt" viewBox="0 0 172.000000 172.000000" preserveAspectRatio="xMidYMid meet" in its root svg element. If you edit your custom SVG similarly, then it should look OK. If you don't want to hardcode the height of the navigation bar, height="100%" should also work.

It might be possible to change renderLogo to handle the resizing more automatically but I guess there would be a high risk of breaking compatibility with existing documentation projects. I think viewBox should be included in custom SVG files anyway, rather than guessed by DocFX.