Skip to content

Instantly share code, notes, and snippets.

Last active Mar 31, 2018
What would you like to do?
rehype svg attributes fix
// complete list of camelCase attributes
const camelAttributes = [
'allowReorder', 'attributeName', 'attributeType', 'autoReverse',
'baseFrequency', 'baseProfile', 'calcMode', 'clipPathUnits', 'contentScriptType',
'contentStyleType', 'diffuseConstant', 'edgeMode', 'externalResourcesRequired',
'filterRes', 'filterUnits', 'glyphRef', 'gradientTransform', 'gradientUnits',
'kernelMatrix', 'kernelUnitLength', 'keyPoints', 'keySplines', 'keyTimes', 'lengthAdjust',
'limitingConeAngle', 'markerHeight', 'markerUnits', 'markerWidth', 'maskContentUnits',
'maskUnits', 'numOctaves', 'pathLength', 'patternContentUnits', 'patternTransform',
'patternUnits', 'pointsAtX', 'pointsAtY', 'pointsAtZ', 'preserveAlpha',
'preserveAspectRatio', 'primitiveUnits', 'refX', 'refY', 'repeatCount', 'repeatDur',
'requiredExtensions', 'requiredFeatures', 'specularConstant', 'specularExponent',
'spreadMethod', 'startOffset', 'stdDeviation', 'stitchTiles', 'surfaceScale',
'systemLanguage', 'tableValues', 'targetX', 'targetY', 'textLength', 'viewBox',
'viewTarget', 'xChannelSelector', 'yChannelSelector', 'zoomAndPan',
const camelToKebab = (match, l) => `-${l.toLowerCase()}`
// build a hashmap of {'foo-bar': 'fooBar'}
const kebabToCamel = camelAttributes.reduce((map, camelAttribute) => {
const kebabAttribute = camelAttribute.replace(/([A-Z])/g, camelToKebab)
map[kebabAttribute] = camelAttribute
return map
}, {})
const kebabRegExp = new RegExp(`( ${Object.keys(kebabToCamel).join('=| ')}=)`, 'g')
const fixSVGAttribute = (match, kebabMatch) => {
const kebabAttribute = kebabMatch.slice(1, -1)
const camel = kebabToCamel[kebabAttribute]
if (camel) {
return ` ${camel}=`
return kebabMatch
const fixSVGContent = (match, svgContent) => {
const newContent = svgContent.replace(kebabRegExp, fixSVGAttribute)
return match.replace(svgContent, newContent)
const matchSVG = new RegExp('<svg(.*)</svg>', 's')
const fixSVG = (content) => {
return content.replace(matchSVG, fixSVGContent)
/* usage */
function foo (vfile) {
if (vfile.contents && vfile.contents.includes('<svg')) {
vfile.contents = fixSVG(vfile.contents)
return vfile
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment