feat: ✨ Add viewBox attribute to SVG by mjr9804 · Pull Request #146 · bubkoo/html-to-image

mjr9804 · 2021-06-14T20:41:32Z

Description

Adds a viewBox attribute to rendered SVGs.

This change just sets the viewBox to match the width and height attributes that are already being set on the SVG, so the image isn't visually altered by this change. Example:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="9" viewBox="0 0 100 9">

Motivation and Context

Having a viewBox set helps with allowing a browser to auto-scale the SVG when it's displayed inside a parent container (for example, a <div> wrapper of a different size than the image).

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Enhancement (changes that improvement of current feature or performance)
Refactoring (changes that neither fixes a bug nor adds a feature)
Test Case (changes that add missing tests or correct existing tests)
Code style optimization (changes that do not affect the meaning of the code)
Docs (changes that only update documentation)
Chore (changes that don't modify src or test files)

Self Check before Merge

My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.

The should render content from shadow node of custom element test is failing in master, so this change doesn't address that.

biiibooo · 2021-06-14T20:41:46Z

👋 @mjr9804

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

fix: don't overwrite prevent_default if default wasn't prevented
feat: add graph.scale() method
docs: graph.getShortestPath is now available

Things that will help get your PR across the finish line:

Follow the TypeScript coding style.
Run npm run lint locally to catch formatting errors earlier.
Document any user-facing changes you've made.
Include tests when adding/changing behavior.
Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

biiibooo · 2021-07-05T00:55:29Z

Hiya!
This PR has gone quiet. Spooky quiet. 👻
We get a lot of PRs, so we currently close PRs after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this PR or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this PR open!
Thanks for being a part of the Antv community! 💪💯

biiibooo · 2021-07-15T06:22:10Z

👋 @mjr9804 Congrats on merging your first pull request! 🎉🎉🎉

# [1.7.0](v1.6.2...v1.7.0) (2021-07-23) ### Bug Fixes * 🐛 UMD bundle is missing local source dependencies ([#138](#138)) ([67be116](67be116)) * 🐛 fontAwesome icons are not included in the resulting image on safari ([#131](#131)) ([c6ebb34](c6ebb34)) ### Features * ✨ Add viewBox attribute to SVG ([#146](#146)) ([b4ac1d8](b4ac1d8))

biiibooo · 2021-07-23T03:06:45Z

🎉 This PR is included in version 1.7.0 🎉

The release is available on:

# 1.0.0 (2025-09-21) ### Bug Fixes * 🐛 UMD bundle is missing local source dependencies ([bubkoo#138](https://github.com/ruediste/html-to-image/issues/138)) ([67be116](67be116)) * 🐛 [bubkoo#74](https://github.com/ruediste/html-to-image/issues/74) process reference ([bubkoo#75](https://github.com/ruediste/html-to-image/issues/75)) ([9e9d71b](9e9d71b)) * 🐛 apply css styles to svg elements ([85b2859](85b2859)) * 🐛 auto install semantic-release-config ([aff7edc](aff7edc)) * 🐛 cannot assign to read only property 'className' of object '#<… ([7d5a13b](7d5a13b)) * 🐛 cloneCSSStyle: copy transformOriginProp ([bubkoo#297](https://github.com/ruediste/html-to-image/issues/297)) ([76b978a](76b978a)) * 🐛 config changelog ([297b17f](297b17f)) * 🐛 font format could be without qoutation ([bubkoo#217](https://github.com/ruediste/html-to-image/issues/217)) ([2a96149](2a96149)) * 🐛 fontAwesome icons are not included in the resulting image on safari ([bubkoo#131](https://github.com/ruediste/html-to-image/issues/131)) ([c6ebb34](c6ebb34)) * 🐛 parse [@import](https://github.com/import) rules in fetched CSS ([bubkoo#100](https://github.com/ruediste/html-to-image/issues/100)) ([553c7e1](553c7e1)) * 🐛 process is not defined ([a2c7d03](a2c7d03)) * 🐛 publish to github package ([f0914a2](f0914a2)) * 🐛 publish to github package ([44e358e](44e358e)) * 🐛 publish to github package ([51ed412](51ed412)) * 🐛 publish to github package ([acde2cc](acde2cc)) * 🐛 push back ([f0c56f6](f0c56f6)) * 🐛 release ([807745f](807745f)) * 🐛 release config ([1032077](1032077)) * 🐛 render svg as html elements ([5e54101](5e54101)) * 🐛 set selected attribute on option to draw it ([bubkoo#280](https://github.com/ruediste/html-to-image/issues/280)) ([caf97c8](caf97c8)) * 🐛 ternary to convert slot assignedNodes to array ([bubkoo#168](https://github.com/ruediste/html-to-image/issues/168)) ([d12f4e2](d12f4e2)) * 🐛 test release ([81d9e0b](81d9e0b)) * 🐛 test release ([6d58133](6d58133)) * 🐛 test release ([8e663f2](8e663f2)) * 🐛 text breaks on the last word ([bubkoo#270](https://github.com/ruediste/html-to-image/issues/270)) ([062c98a](062c98a)) * 🐛 toCanvas scale ([bubkoo#102](https://github.com/ruediste/html-to-image/issues/102)) ([4049536](4049536)) * 🐛 update keywords ([6a04e03](6a04e03)), closes [#63](https://github.com/ruediste/html-to-image/issues/63) [bubkoo#64](https://github.com/ruediste/html-to-image/issues/64) * 🐛 use bot token ([44f9b28](44f9b28)) * 🐛 use bot token ([2917e50](2917e50)) * 🐛 use bot token ([6af2c7b](6af2c7b)) * 🐛 use bot token ([d9d8f7f](d9d8f7f)) * 🐛 use content-type to get image src type if extension is not provided in url ([bubkoo#98](https://github.com/ruediste/html-to-image/issues/98)) ([5e2da9c](5e2da9c)) * add possibility to use own handling of onerror which will not en… ([bubkoo#453](https://github.com/ruediste/html-to-image/issues/453)) ([04160c3](04160c3)) * apply skipFonts option ([6b7e923](6b7e923)), closes [bubkoo#93](https://github.com/ruediste/html-to-image/issues/93) [bubkoo#310](https://github.com/ruediste/html-to-image/issues/310) * build script ([db7d435](db7d435)) * **ci:** 🐛 👷 disable publish to github package ([b37dbe6](b37dbe6)) * **ci:** 🐛 👷 label from branch name ([e8deafb](e8deafb)) * **ci:** 🐛 👷 publish to github ([b517dca](b517dca)) * **ci:** 🐛 👷 publish to github package ([d769707](d769707)) * **ci:** 🐛 👷 publish to github package ([1d497fe](1d497fe)) * **ci:** 🐛 👷 publish To GitHub Package Registry ([523a73a](523a73a)) * **ci:** 🐛 👷 release config ([39cbcf1](39cbcf1)) * clone iframe nodes better ([bubkoo#352](https://github.com/ruediste/html-to-image/issues/352)) ([bc6b865](bc6b865)) * clone svg symbols ([bubkoo#344](https://github.com/ruediste/html-to-image/issues/344)) ([aec6fa1](aec6fa1)) * **cloneCSSStyle:** rounded values of d attr fix ([bubkoo#358](https://github.com/ruediste/html-to-image/issues/358)) ([6d28bdb](6d28bdb)), closes [bubkoo#357](https://github.com/ruediste/html-to-image/issues/357) * **config:** 🐛 ⚙️ release config ([6661037](6661037)) * **config:** 🐛 ⚙️ release config ([0f06370](0f06370)) * **config:** 🐛 ⚙️ release config ([82af212](82af212)) * ensure images are totally prcoessed before using them (ios) ([bubkoo#478](https://github.com/ruediste/html-to-image/issues/478)) ([51fb98f](51fb98f)) * fallback to `poster` when `currentSrc` of video is null ([5d79666](5d79666)) * Fix `fontEmbedCSS ` incorrect sizing ([bubkoo#422](https://github.com/ruediste/html-to-image/issues/422)) ([7020162](7020162)) * handle 404 status of fetch ([ecfdbcc](ecfdbcc)) * include source in npm package ([bubkoo#316](https://github.com/ruediste/html-to-image/issues/316)) ([b609415](b609415)) * Large Dom sizes failing to be drawn correctly into canvas when exporting to PNG ([bubkoo#197](https://github.com/ruediste/html-to-image/issues/197)) ([1ee2e7f](1ee2e7f)) * **mask:** add support for -webkit-mask and -webkit-mask-image ([bubkoo#382](https://github.com/ruediste/html-to-image/issues/382)) ([5bdfda7](5bdfda7)) * node version ([13a6989](13a6989)) * revert the change in the pre-install hook ([ed7db4d](ed7db4d)), closes [bubkoo#365](https://github.com/ruediste/html-to-image/issues/365) * specify plugins ([d90ec23](d90ec23)) * switch lazy loading images to eager ([bubkoo#359](https://github.com/ruediste/html-to-image/issues/359)) ([f7c311b](f7c311b)) * test specs ([c7a664e](c7a664e)) * type errors ([b516783](b516783)) * use "secrets.GITHUB_TOKEN" to publish to GPR ([2652288](2652288)) * use frames for video capture & add iframes ([bubkoo#346](https://github.com/ruediste/html-to-image/issues/346)) ([e316c61](e316c61)) ### Features * ✨ add 'fetchRequestInit' option ([bubkoo#210](https://github.com/ruediste/html-to-image/issues/210)) ([c51da3a](c51da3a)) * ✨ add option to skip font embed ([fd8ddde](fd8ddde)) * ✨ add some actions ([ddaa6fb](ddaa6fb)) * ✨ add svg image with href support ([bubkoo#198](https://github.com/ruediste/html-to-image/issues/198)) ([cb6f916](cb6f916)) * ✨ Add viewBox attribute to SVG ([bubkoo#146](https://github.com/ruediste/html-to-image/issues/146)) ([b4ac1d8](b4ac1d8)) * ✨ added a cache for responses to fonts ([ada98c2](ada98c2)) * ✨ added includeQueryParams flag ([bubkoo#260](https://github.com/ruediste/html-to-image/issues/260)) ([259d71e](259d71e)) * ✨ option to specify font embed css ([bubkoo#109](https://github.com/ruediste/html-to-image/issues/109)) ([6d644da](6d644da)) * ✨ option to specify preferred font format ([bubkoo#106](https://github.com/ruediste/html-to-image/issues/106)) ([740b371](740b371)) * ✨ push a release commit and tag, including configurable files ([710851e](710851e)) * ✨ to SvgDataUrl => toSvg ([bf15ff6](bf15ff6)) * ✨ update deps ([8dd487a](8dd487a)) * ✨ use app token ([ef4c60f](ef4c60f)) * support webp format ([bubkoo#343](https://github.com/ruediste/html-to-image/issues/343)) ([09d4810](09d4810)), closes [bubkoo#326](https://github.com/ruediste/html-to-image/issues/326) * **tocanvas:** ✨ adding custom width/height for exported canvas ([bubkoo#110](https://github.com/ruediste/html-to-image/issues/110)) ([aefa9f8](aefa9f8)) ### Performance Improvements * embed only used fonts ([bubkoo#476](https://github.com/ruediste/html-to-image/issues/476)) ([09bee44](09bee44)) * svg cloning optimized using deep clone ([bubkoo#462](https://github.com/ruediste/html-to-image/issues/462)) ([9aac2fd](9aac2fd))

feat: ✨ Add viewBox attribute to SVG

f169b8a

biiibooo bot added the feature label Jun 14, 2021

biiibooo bot added the stale label Jul 5, 2021

bubkoo approved these changes Jul 15, 2021

View reviewed changes

bubkoo merged commit b4ac1d8 into bubkoo:master Jul 15, 2021

biiibooo bot added the released label Jul 23, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ✨ Add viewBox attribute to SVG#146

feat: ✨ Add viewBox attribute to SVG#146
bubkoo merged 1 commit intobubkoo:masterfrom
mjr9804:feature/svg-viewbox

mjr9804 commented Jun 14, 2021

Uh oh!

biiibooo bot commented Jun 14, 2021

Uh oh!

biiibooo bot commented Jul 5, 2021

Uh oh!

biiibooo bot commented Jul 15, 2021

Uh oh!

biiibooo bot commented Jul 23, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

mjr9804 commented Jun 14, 2021

Description

Motivation and Context

Types of changes

Self Check before Merge

Uh oh!

biiibooo bot commented Jun 14, 2021

Uh oh!

biiibooo bot commented Jul 5, 2021

Uh oh!

biiibooo bot commented Jul 15, 2021

Uh oh!

biiibooo bot commented Jul 23, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants